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的同时需要定义占位符，比如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就变成空字符串了。