vue-router传参两种方式：params和query

1、编程式导航：this.$router.push()

方法一：

getDescribe(id) {
//  直接调用$router.push 实现携带参数的跳转
 this.$router.push({
   path: `/describe/${id}`,
 })
}

对应路由配置如下

{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}

在子组件中可以使用来获取传递的参数值:

this.$route.params.id

方案二：

通过路由属性中的name来确定匹配的路由，通过params来传递参数

this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})

对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示

 {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
  path: '/describe',
  query: {
    id: id
  }
})

对应路由配置：

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

this.$route.query.id

2、声明式导航：

<router-link to=""></router-link>（跟上面规则其实一样就是写法不同罢了）
（1）、命名路由传递参数需要使用params来传递，目标页面接收传递参数时使用params。

<router-link :to="{ name: 'home', params: { id: 1}}">click to news page</router-link>
（2）、查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数，目标页面接收传递的参数使用query。刷新页面不会出错

<router-link :to="{ path: '/home', query: { id: 1}}">click to news page</router-link>

列表页带参数进详情页

1.用params传参

<router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">（注意：用params传参这里是命名路由，用name）

</router-link>

路由配置如下：

export default new Router({

routes: [

 {

   path: '/msgDetail/:id',

   name: 'msgDetail',

   component: msgDetail

 }

]

详情页接收参数：

this.$route.params.id（注意：这里是$route，而不是$router）

2.用query传参

<router-link :to="{ path: '/msgDetail', query: {id: item.msg_id} }">（注意：用query传参这里是带查询参数，用path）

</router-link>

路由配置如下：

export default new Router({

routes: [

 {

   path: '/msgDetail',

   name: 'msgDetail',

   component: msgDetail

 }

]

详情页接收参数：

this. $route.query.id（注意：这里是$ route，而不是$router）

最后编辑于：2020.05.14 09:26:52