美文网首页
vue路由传参

vue路由传参

作者: _daraDu | 来源:发表于2018-07-31 18:02 被阅读0次

    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获取传递的值

    相关文章

      网友评论

          本文标题:vue路由传参

          本文链接:https://www.haomeiwen.com/subject/cgvhvftx.html