Vue-router嵌套路由 · Vue-講義07

# 嵌套路由先了解一個網站[`9891.com`](http://www.9891.com) 個人中心的財務管理，就是用到了該技術。 ![](https://img.kancloud.cn/99/97/9997fe62ec235b7cd57cf03703ee510d_1486x570.png) ## 嵌套路由是一個很常見的功能 > 比如在`home`頁面中, 我們希望通過`/home/news`和`/home/message`訪問一些內容. > 一個路徑映射一個組件, 訪問這兩個路徑也會分別渲染兩個組件. ## 路徑和組件的關系如下: ![](https://img.kancloud.cn/0f/08/0f0844cad906c607c880e90d01e7019a_337x338.png) ## 實現嵌套路由有兩個步驟: 創建對應的子組件, 并且在路由映射中配置對應的子路由. 在組件內部使用`<router-view>` 組件 # 嵌套路由實現 > 新建**news.vue**文件以及**message.vue**文件。 > 在`router/index.js`中對應的`path:’home’`路由下書寫子路由 > 在`home`組件中添加`router-link`鏈接及`router-view` ![](https://img.kancloud.cn/0f/c8/0fc8c2751f56cfa37b0f233f772f97d4_979x429.png) ![](https://img.kancloud.cn/2b/fe/2bfe19b99142dee72b55498ba852f4d3_818x303.png) ![](https://img.kancloud.cn/30/d1/30d1c27c3e8cd1118b65be3868cedabe_792x532.png) ![](https://img.kancloud.cn/82/70/8270cf5184338756a5631cd65b0337a2_917x515.png) # 嵌套默認路徑 ## 嵌套路由也可以配置默認的路徑, 配置方式如下: ![](https://img.kancloud.cn/d3/c8/d3c82ab90818c9e67f50de4c2303a56d_1280x676.png)