vue中字符串如何拼接路由path路径
作者:吴莉
这篇文章主要介绍了vue中字符串如何拼接路由path路径方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue字符串拼接路由path路径
功能:产品列表页面进入产品详情页面,产品详情中四个模块之间切换
products.vue进入detail.vue页面
detail.vue中配置子路由
第一步
products.vue
<ul class="pro"> <router-link to="/detail/pro1" tag="li">产品1</router-link> <router-link to="/detail/pro2" tag="li">产品2</router-link> <router-link to="/detail/pro3" tag="li">产品3</router-link> <router-link to="/detail/pro4" tag="li">产品4</router-link> </ul>
第二步
router/index.js 路由配置
{ path: '/detail/:id', component: Detail, children:[ { path: 'c1', component: C1}, { path: 'c2', component: C2}, { path: 'c3', component: C3}, { path: 'c4', component: C4} ] }
第三步
detail.vue中接收产品列表中传递过来的参数,并实现子路由的切换
<ul class="detail-left"> <li><h3>产品{{this.$route.params.id}}</h3></li> <router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c1"}'>数据统计</router-link> <router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c2"}'>数据预测</router-link> <router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c3"}'>数据分析</router-link> <router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c4"}'>广告发布</router-link> </ul>
注意:
1.接参数的方式是this.$route.params.id中的id和路由中配置的 path: '/detail/:id’的id对应,这个id相当于一个变量
2.路由路径中字符串拼接放方式可以这样写
:to='{path:"/detail/"+this.$route.params.id+"/c1"}'
完整index.js配置如下
import Vue from 'vue' import Router from 'vue-router' import Detail from "../detail/detail" import Home from "../home/home" import C1 from "../detail/child1" import C2 from "../detail/child2" import C3 from "../detail/child3" import C4 from "../detail/child4" import HotDetail from "../home/hot-detail" Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Home }, { path:"/hotdetail", component:HotDetail }, { path: '/detail/:id', component: Detail, children:[ { path: 'c1', component: C1 }, { path: 'c2', component: C2 }, { path: 'c3', component: C3 }, { path: 'c4', component: C4 }, ] } ] })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。