最近遇到这个问题router跳转传参,真是要了老命了。
根据网上各位大神给出的方法,试了
import { useRouter } from 'vue-router'
const router = useRouter()
//1. 无法跳转
router.push(name:'',params:{})
//2. 可以跳转, 但需要在定义router同时定义占位符,比如path:'/user/:userid',否则跳转后收不到值
router.push(path:'',query:{})
1. router.push(name:'',params:{})
params好像已经被移除了,根本无法跳转
2. router.push(path:'', query:{})
可以跳转,但是定义router的同时需要定义占位符,比如path:'/user/:id',而且参数会以/user/1001的形式显示在URL中
const routes = [
{
path:'/user/:id',
name:User,
component:User
}
]
最后仔细翻看官网,使用了官网推荐的状态管理才得以解决,但是仍有其他问题,最后会讲
如上图,新建一个store.js,用于保存你跳转时想要保存的值,比如:
import { reactive } from 'vue'
export const store = reactive({
userinfo: {
name: '',
id: ''
}
})
假设我们想要从A.vue跳转到B.vue,那么
A.vue:
import { store } from '../store/store.js'
//赋值
store.userinfo.id= 1001
//跳转
router.push('/B')
B.vue
import { store } from '../store/store.js'
let userId = store.userinfo.id //接受值
注意:router跳转不是传统意义的从一个html跳转到另外一个html,所以一旦刷新整个页面,store里面的值就没有了,需要重新赋值!比如这里跳转到B.vue后,如果刷新页面,store.userinfo.id就变成空字符串了。