vue动态路由匹配
2020-08-18 16:25
1631 查看
vue动态路由匹配
有的时候我们需要在路由跳转的时候跟上参数,路由传参的参数主要有两种:路由参数、queryString参数
路由参数路由参数需要在路由表里设置。下面的代码就是给detail路由配置接收id的参数:
设置
{path:'/detail/:id',component:Detail}
获取
this.$route.params.id //可以获取到传过来的idqueryString参数
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']
相关文章推荐
- vue动态路由匹配,路由传参
- vue开发:vue动态路由匹配
- vue动态路由匹配和导航
- vue动态路由匹配实例
- 深入简出vue路由——2.路由动态匹配
- vue系列之动态路由【原创】
- vue中使用vue-awesome-swiper做轮播 ,手动滑动、vue-router路由跳转和动态更新数据,导致自动轮播失效问题
- vue动态路由:路由参数改变,视图不更新问题的解决
- vue实现elementUI的左侧导航栏,右侧动态调用路由并解决导航栏高亮问题
- Vue.js 中的动态路由
- vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库
- v-router路由动态匹配
- VUE路由动态加载实例代码讲解
- vue addRoutes实现动态权限路由菜单的示例
- Vue的路由动态重定向和导航守卫实例
- vue-router 动态添加 路由
- Vue根据路由动态加载本地背景图片
- vue用addRoutes实现动态路由的示例
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转
- 详解vue-router2.0动态路由获取参数