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)品列表中傳遞過(guò)來(lái)的參數(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.路由路徑中字符串拼接放方式可以這樣寫(xiě)
: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)文章
vue中el-select 和el-tree二次封裝實(shí)現(xiàn)
本文介紹了vue中el-select 和el-tree二次封裝實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),它通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue 子組件修改data或調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Antd表格滾動(dòng) 寬度自適應(yīng) 不換行的實(shí)例
這篇文章主要介紹了Antd表格滾動(dòng) 寬度自適應(yīng) 不換行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue3?hook自動(dòng)導(dǎo)入的原理,介紹了API的自動(dòng)導(dǎo)入及組件的自動(dòng)導(dǎo)入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Vue實(shí)現(xiàn)用戶沒(méi)有登陸時(shí),訪問(wèn)后自動(dòng)跳轉(zhuǎn)登錄頁(yè)面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶沒(méi)有登陸時(shí)，訪問(wèn)后自動(dòng)跳轉(zhuǎn)登錄頁(yè)面,定義路由的時(shí)候配置屬性，這里使用needLogin標(biāo)記訪問(wèn)頁(yè)面是否需要登錄，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
nuxt框架中路由鑒權(quán)之Koa和Session的用法
后臺(tái)管理頁(yè)面需要有登錄系統(tǒng)，所以考慮做一下路由鑒權(quán)，這篇文章主要介紹了nuxt框架中路由鑒權(quán)之Koa和Session的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對(duì)象，當(dāng)我們修改時(shí)，視圖會(huì)被更新，而變化偵測(cè)是響應(yīng)式系統(tǒng)的核心2021-06-06
Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解
今天小編就為大家分享一篇Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3+Vite使用雙token實(shí)現(xiàn)無(wú)感刷新
本文主要介紹了Vue3+Vite使用雙token實(shí)現(xiàn)無(wú)感刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04