嵌套路由本身很簡單休讳，官方文檔描述也都很仔細遵绰。
嵌套路由簡單描述
一般情況下如下面的代碼展示的一樣公黑，
/join是父頁面，在@/views/join/index.vue這個vue文件中，需要有一個<router-view />去接收嵌套路由的子頁面。也就是代碼展示的@/views/join/detail.vue這個vue文件样漆。這種情況一般就是父頁面需要顯示不同的組件，或者子頁面需要用到的方法晦闰。很常見的功能比如是有幾個導(dǎo)航放祟，切換加載頁面。
export default {
path: '/join', // 加入我們
meta: {
breadName: 'Join'
},
name: 'Join',
component: () => import( /* webpackChunkName: "Join" */ '@/views/join/index.vue'),
children: [
{
// 加入我們詳情
path: 'detail/:id',
name: 'JoinDetail',
meta: {
breadName: 'JoinDetail'
},
component: () => import(/* webpackChunkName: "JoinDetail" */ '@/views/join/detail.vue'),
}
]
}
嵌套路由和面包屑的關(guān)系
在
vue中呻右，我們不可能自己去寫一個數(shù)組去記錄頁面的跳轉(zhuǎn)路徑跪妥，用戶瀏覽的頁面軌跡。因為通常這些都已經(jīng)在vue-router中已經(jīng)能拿到窿冯。如下代碼所展示的骗奖，通過this.$route.matched可以拿到當前頁面的路徑信息。用上面的代碼舉例醒串，當頁面在/join/detail/123的路徑底下的時候，這時候matched可以拿到/join和/join/detail/123
let matched = this.$route.matched;
matched = matched.filter(item => {
return item && item.meta && item.meta.breadName;
});
const temp = matched.map((item) => {
return {
path: item.path,
title: item.meta.breadName,
}
});
const result = [{
path: '/',
title: 'Home',
}].concat(temp)
如下圖展示的這樣鄙皇，我們通過
matched可以拿到/join和/join/detail/123芜赌，一般面包屑會在帶上一個首頁，所以都要自己手動拼一個首頁的內(nèi)容伴逸。拿到這個數(shù)組缠沈，我們就可以通過循環(huán)，自己寫出面包屑错蝴，相信作為前端應(yīng)該都會洲愤。
嵌套路由刷新頁面丟失問題
按照上面兩個步驟，基本上是可以實現(xiàn)面包屑的功能顷锰，但是會出現(xiàn)當用戶在
/join/detail/123的路徑下的時候柬赐，強制刷新頁面，頁面就丟失了官紫。官方文檔是這樣解釋的肛宋。
官方文檔解釋
大概的意思州藕，當有嵌套路由，并且子頁面是和父頁面一點關(guān)系都沒有的時候酝陈。我們在根節(jié)點上需要有一個
router-view去接收它床玻。仔細觀察下下面的代碼和上面的代碼，兩個路由有什么不同的地方沉帮？在主路由上锈死，我們用了一個layout組件接收了它。在children底下穆壕，有一個任何path的都可以訪問匹配到的頁面馅精。
export default {
path: '/join', // 加入我們
meta: {
breadName: 'Join'
},
component: ()=> import(/* webpackChunkName: "Layout" */ '@/components/layout.vue'),
children: [
{
path:'',
name: 'Join',
component: () => import( /* webpackChunkName: "Join" */ '@/views/join/index.vue'),
},
{
// 加入我們詳情
path: 'detail/:id',
name: 'JoinDetail',
meta: {
breadName: 'JoinDetail'
},
component: () => import(/* webpackChunkName: "JoinDetail" */ '@/views/join/detail.vue'),
}
]
}
layout.vue做的事情其實很簡單，它只是有一個router-view去接頁面粱檀，至于具體展示什么洲敢，由children去決定。這樣就不會導(dǎo)致強制刷新頁面失敗茄蚯。
<template>
<div>
<router-view :key="key"/>
</div>
</template>
<script>
export default {
name: 'r-layout',
computed: {
key() {
return this.$route.path + parseInt((Math.random() * 1000));
}
}
}
</script>
總結(jié)
如果父路由和子路由是有關(guān)聯(lián)的压彭，比如我們看淘寶的某個商品，可以通過
bar來切換商品參數(shù)渗常，商品介紹什之類的壮不，可以采用第一個，最上面的方案皱碘。
如果父路由和子路由是沒有任何關(guān)系询一，比如商品列表頁面和商品詳情頁面。要采用第三種方案癌椿，需要有一個layout去接收它健蕊。否則會出現(xiàn)刷新頁面，頁面丟失的情況踢俄。
面包屑則通過路由的match缩功，可以拿到當前頁面的路由信息。通常情況下我們會在加上一個首頁的路由都办。
