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']