vue路由传参怎么实现？

1. Vue传参方式

1.1 通过动态路由传参

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

在这个实例中，我们就可以通过:id这种方式实现把参数的值传递到组件中，现在呢，像 /user/foo 和 /user/bar这样的路由，将把参数值foo、bar通过参数

1.2 通过路由URL中添加query参数传参

通过路由URL中添加query参数的方式，就和普通的http URL的get传参方式一样，通过在链接地址后面添加?queryName=queryValue的方式实现传参，如：

名id传递。

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})