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相对应接收时候用的是query
this.$route.query.id;

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

• 还可以在js里面这么写

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

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

vue路由中文文档：https://router.vuejs.org/zh/

gzh.jpg

每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。