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