vue-router實(shí)現(xiàn)嵌套路由的講解
更新時(shí)間：2019年01月19日 15:40:16 作者：muzidigbig
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
一、嵌套路由（配置好父路由component后，在父路由下面添加children屬性來配置這個(gè)父路由的子路由）
需要注意的是：父組件中的<router-view></router-view>是子組件的占位符是必不可少的
嵌套路由的現(xiàn)象：點(diǎn)擊了路由跳轉(zhuǎn)之后父路由組件的內(nèi)容一直呈現(xiàn)；子路由的內(nèi)容進(jìn)行切換，地址欄的路徑也隨之改變。
// 嵌套路由
{
path: '/nest',
component: () => import('@/nest/nest'),
// 嵌套路由的關(guān)鍵字children，在父路由中添加children數(shù)組 中添加子路徑
children:[
{
// 要注意，以 / 開頭的嵌套路徑會(huì)被當(dāng)作根路徑,這讓你充分的使用嵌套組件而無須設(shè)置嵌套的路徑。如果這里的path的值為'/son1將無法渲染son1子組件'
path: 'son1',
component: () => import('@/nest/nest_son1')
},
]
}
上面子路由中加不加‘/' 的區(qū)別：當(dāng)去到son1的時(shí)候加 ‘/'會(huì)在地址欄中顯示 #/son1;不加 ‘/'的時(shí)候回在地址欄中顯示 #/nest/son1
注意：/xx就是根路徑
效果：
若有不足請(qǐng)多多指教！希望給您帶來幫助!
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方
最近的項(xiàng)目需要用到vue/cli,但是用cnpm安裝vue/cli的時(shí)候報(bào)錯(cuò)了,下面這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下2022-11-11
vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯(cuò)的完美解決
這篇文章主要介紹了vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯(cuò)的完美解決方案，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue3 銷毀組件方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在 Vue2 項(xiàng)目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案，VueJS 是開發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架，但與其他框架一樣，如果您忽略它，性能就會(huì)受到影響，下面我們就一起來看看怎么才能讓性能提升吧2021-12-12
這篇文章主要介紹了VUE注冊(cè)全局組件和局部組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue中多附件上傳的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
本篇文章主要介紹了vue-validator（vue驗(yàn)證器）,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01