Vue——Router（路由跳转传参）

在vue的页面跳转中，有三种传参方法：

1、路径传参

     在配置路由时，我们可以配置可传参的路由（path中的id即为路径跳转中的参数），使用这种方法时，我们需要如下面的代码方式配置路由。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

<router-link to="{path:'/user/123'}">下一页</router-link>
router.push({ path: '/user/123'}) //123为路由传递的参数

下一个页面在route的param中获取参数

$route.params.id

2、params传参

    在进行路由跳转时，在跳转代码中添加params属性，params中就是要传递的参数

<router-link to="{name:'user',params:{id:'123'}}">下一页</router-link>
//在to方式跳转页面时，跳转参数需要提供name值进行跳转，不可提供path，因为在提供path的情况下，params会被忽略
//（提供path会默认是方法1的传值，忽略params）

router.push({ name: 'user', params: { id: '123' }})

下一个页面在route的params中获取参数

$route.params.id

3、query传参

在进行路由跳转时，在跳转代码中添加query属性，query中就是要传递的参数（与params用法类似）

<router-link to="{path:'user',query:{id:'123'}}">下一页</router-link>
//与params的区别在于，query传值时，没有path的限制；也就是说可以提供path值作为跳转依据

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

下一个页面在route的query中获取参数

$route.query.id