Vue3 Router跳转传参，最佳方法

最近遇到这个问题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.push(path:'/user', query:{id:'123'}) (注意：这里用name, 或者用path都可以，但是用path一定要记得带前面的 '/' )

浏览器会使用URL：http://localhost:5173/user?id=123 进行跳转。

获取参数：

router.currentRoute.value.query.id

3. 另外，还可以定义router的同时定义占位符，比如path:'/user/:id'，这时参数会以/user/123的形式显示在URL中:

const routes = [
    {
        path:'/user/:id',
        name:User,
        component:User
    }
  ]

获取参数：

router.currentRoute.value.params.id

但是注意，如果这样定义router,则id就会被要求为必须的参数，这时不能再使用router.push(path:'/user', query:{id:'123'})

而必须使用

router.push(path:'/user/123')

而且路由跳转也必须带上参数:

<RouterLink to="/user/123">用户页面</RouterLink>

那么有没有解决方法呢？当然有，一个router不行，我们就定义两个router呗，一个带占位符，另一个不带占位符，不就解决了吗:

    {
      path: '/user/:id',
      name: User,
      component: User
    },
    {
      path: '/user2',
      name: User2,
      component: User
    }

4. 官网推荐的状态管理，但是仍有其他问题，最后会讲

如上图，新建一个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就变成空字符串了。

综上所述，我推荐使用第二种方式来进行传参和接收参数，因为这种方式最灵活

router.push(path:'/user', query:{id:'123'})

router.currentRoute.value.query.id