vue中字符串如何拼接路由path路徑
更新時(shí)間：2023年12月28日 14:57:14 作者：吳莉
這篇文章主要介紹了vue中字符串如何拼接路由path路徑方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue字符串拼接路由path路徑
功能：產(chǎn)品列表頁(yè)面進(jìn)入產(chǎn)品詳情頁(yè)面，產(chǎn)品詳情中四個(gè)模塊之間切換
products.vue進(jìn)入detail.vue頁(yè)面
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ù)，并實(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)計(jì)</router-link>
<router-link tag="li" :to='{path:"/detail/"+this.$route.params.id+"/c2"}'>數(shù)據(jù)預(yù)測(cè)</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對(duì)應(yīng),這個(gè)id相當(dāng)于一個(gè)變量
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
},
]
}
]
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11
vue+element-ui+ajax實(shí)現(xiàn)一個(gè)表格的實(shí)例
下面小編就為大家分享一篇vue+element-ui+ajax實(shí)現(xiàn)一個(gè)表格的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
學(xué)過?vue2?的寶子們應(yīng)該都清楚，計(jì)算屬性這個(gè)東西在項(xiàng)目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對(duì)來說比較高。本文就來為大家介紹一下Vue3中計(jì)算屬性的用法，需要的可以參考一下2022-07-07
如何正確解決VuePress本地訪問出現(xiàn)資源報(bào)錯(cuò)404的問題
這篇文章主要介紹了如何正確解決VuePress本地訪問出現(xiàn)資源報(bào)錯(cuò)404的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了如何定義地圖容器及操作按鈕,使用高德地圖API進(jìn)行軌跡繪制及播放的方法,并強(qiáng)調(diào)了界面樣式的重要性,高德地圖API的使用需要注冊(cè)獲取key,并且設(shè)置了地圖容器的大小,需要的朋友可以參考下2024-11-11
前端在el-dialog中嵌套多個(gè)el-dialog代碼實(shí)現(xiàn)
最近使用vue+elementUI做項(xiàng)目,使用過程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個(gè)el-dialog代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08