vue路由传参

Vue router如何传参

params、query是什么？

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
//192.168.1.95:8081/#/newList?id=activityNew111

     <wv-cell title="查看更多" is-link @click="getList(sendNew.id)" class="unreadNum"></wv-cell>

1、 直接调用$router.push 实现携带参数的跳转,跳转不同页

   getDetails(id) {
      this.$router.push({
        path: `/${id}`,
      })
    }
  //192.168.1.95:8081/#/id

路由配置：

{
      path: '/id',   //meetingDetails
      name: 'id',    //meetingDetails
      component: id  //meetingDetails
}

子组件通过$route.params.id获取传递的值

2、 params传参(通过路由属性中的name来确定匹配的路由)

  getList(id) {  
      this.$router.push({
        name:'/newList',
        params: { id: id}
      })
    }

3、 query传参 (使用path来匹配路由)

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

将id传入newList，newList页面根据id不同传入不同数据
子组件通过$route.params.id获取传递的值