Vue-Router的传参方式

1、query传参

// 传递参数
this.$router.push({path:'/xxx',query:{id:id}})
// 接收参数
this.$route.query.id

2、params传参

// 传递参数
this.$router.push({name:'xxx',params:{id:id}})
// 接收参数
this.$route.params.id

3、路由传参

// 传参
{
    path: '/test/:id/:name?', //问号的意思是该参数不是必传项
    name: 'Home',
    component: 'home.vue',
    props: true,
}
// 当 props 设置为 true 时，route.params 将被设置为组件的 props。
// 当 props 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。
// 你可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。

// 接收参数
<router-link to="/test/001/zyy">跳转</router-link>

注：params刷新时页面数据会丢失，query相当于get请求，在地址栏可以看到参数