巢狀路由顧名思義就是路由的多層巢狀。
結合vue-router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。
總共新增兩個子路由，分別命名collection.vue（我的收藏）和trace.vue（我的足跡）
1、重構router/index.js的路由配置，需要使用children陣列來定義子路由，具體如下：
import vue from 'vue'
import router from 'vue-router'
import home from '@/home'
import brand from '@/brand'
import member from '@/member'
import cart from '@/cart'
import me from '@/me'
import collection from '@/collection'
import trace from '@/trace'
import default from '@/default'
vue.use(router)
export default new router(,,,
,,]}
]})以「/」開頭的巢狀路徑會被當作根路徑，所以子路由上不用加「/」;
在生成路由時，主路由上的path會被自動新增到子路由之前，所以子路由上的path不用在重新宣告主路由上的path了。
2、me.vue的**如下：
頁面效果：
當訪問到http://localhost:8080/#/me時，元件me中並沒有渲染出任何東西，這是因為沒有匹配到合適的子路由。如果需要渲染一些預設內容，需要在children中新增乙個空的子路由：
,此時瀏覽器的效果：預設元件default被渲染出來了
vue router子路由 路由巢狀
定義 子路由，也叫路由巢狀，採用在children後跟路由陣列來實現，陣列裡和其他配置路由基本相同，需要配置path和component，然後在相應部分新增來展現子頁面資訊，相當於嵌入iframe。hello h1 新增子路由導航 導航 home 首頁 router link home one 子頁...
vue router 巢狀路由
我們已經學習過了vue模板的另外定義形式，使用。首頁 新聞然後js裡定義路由元件的時候 1.定義 路由 元件。const home const news 實際應用介面，通常由多層巢狀的元件組合而成。比如，我們 首頁 元件中，還巢狀著 登入 和 註冊 元件，那麼url對應就是 home login和 ...
vue router 路由的巢狀使用
巢狀路由是乙個很常見的功能 比如在home頁面中，希望通過 home news和home message訪問一些內容 乙個路徑對映乙個元件，訪問者兩個路徑也會分別渲染這兩個元件 路徑和元件的關係如下 實現巢狀路由有兩個步驟 1.建立對應的子元件，並且在路由對映中配置對應的子路由 2.在元件內部使用 ...