vue动态路由匹配

vue动态路由匹配

有的时候我们需要在路由跳转的时候跟上参数,路由传参的参数主要有两种:路由参数、queryString参数

路由参数

路由参数需要在路由表里设置。下面的代码就是给detail路由配置接收id的参数:

设置

{path:'/detail/:id',component:Detail}

获取

this.$route.params.id  //可以获取到传过来的id
queryString参数

queryString参数不需要在路由表设置接收,直接设置?后面的内容,在路由组件中通过this.$route.query接收

设置

<router-link to="/detail/?title=文章" tag="li">文章三</router-link>

获取

this.$route.query.title
prop将路由与组件解耦

在组件中接收路由参数需要this.$route.params.id,代码冗余,现在可以在路由表里配置props:true

{path:'detail/:id',component:AppNewsDetail,name:'detail',props:true}

在自己(detail)路由中可以通过props接收id参数去使用了

props:['id']

请用今天的努力,让明天没有遗憾。
原文地址:https://www.cnblogs.com/cupid10/p/15617690.html