vue中字符串如何拼接路由path路徑

更新時間：2023年12月28日 14:57:14 作者：吳莉

這篇文章主要介紹了vue中字符串如何拼接路由path路徑方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue字符串拼接路由path路徑

功能：產(chǎn)品列表頁面進入產(chǎn)品詳情頁面，產(chǎn)品詳情中四個模塊之間切換

products.vue進入detail.vue頁面

detail.vue中配置子路由

第一步

products.vue

<ul class="pro">
		<router-link to="/detail/pro1" tag="li">產(chǎn)品1</router-link>
		<router-link to="/detail/pro2" tag="li">產(chǎn)品2</router-link>
		<router-link to="/detail/pro3" tag="li">產(chǎn)品3</router-link>
		<router-link to="/detail/pro4" tag="li">產(chǎn)品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中接收產(chǎn)品列表中傳遞過來的參數(shù)，并實現(xiàn)子路由的切換

<ul class="detail-left">
<li><h3>產(chǎn)品{{this.$route.params.id}}</h3></li>
	<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c1"}'>數(shù)據(jù)統(tǒng)計</router-link>
	<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c2"}'>數(shù)據(jù)預(yù)測</router-link>
	<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c3"}'>數(shù)據(jù)分析</router-link>
	<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c4"}'>廣告發(fā)布</router-link>
</ul>

注意：

1.接參數(shù)的方式是this.$route.params.id中的id和路由中配置的 path: '/detail/:id’的id對應(yīng),這個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
				},
			]
    }
  ]
})