vue路由传参的几种方式

• 完整步骤

//步骤一<router-link v-bind="{to:'/detail/'+listItem.id}">
   {{listItem.title}}</router-link>

//步骤二//路由配置文件里面path后面加上'/:id'{path: '/detail/:id',component: detail}

//步骤三//这里也可以在生命周期的钩子函数create里面接收id，然后设置id//detail页面接收传来的id参数computed: {    id(){      return this.$route.params.id;
    }
}

下面对以上方法进行扩展

• 对步骤一扩展还可以这么写

//第二种写法：<router-link :to="{path:'/detail/'+id}"><router-link>//第三种写法：//这里有name的话需要在路由配置文件设置name，如下所示，注意name后面命名的值是唯一的{path: '/detail/:id',name:'detail',component: detail}
<router-link :to="{name:'detail',params:{id:yourid}}"><router-link>//to绑定的是name相对应接收时候用的是querythis.$route.query.id;

params相当于post可以在地址栏看到路由传的参数，query相当于get在地址栏看不到传的参数

• 还可以在js里面这么写

router.push({ name: 'detail', params: { id: yourid }})router.push({ path: 'detail', query: { id: yourid }})

作者：前端来入坑
链接：https://www.jianshu.com/p/ba6df78f6ba7