1. 程式人生 > >Vue路由(vue-router)03(子路由)

Vue路由(vue-router)03(子路由)

對於單頁面的vue應用,子路由的配置可能是必不可少的,其實vue的子路由配置很簡單。這篇文章是基於上一片文章(路由配置02)的。

示例需求,早footer.vue模組中配置子路由(示例檔案footer01.vue和footer02.vue)。

1. 在components資料夾下新建一個children資料夾,在其中新件子路由檔案。(children資料夾名稱不限制,子路由檔案的位置不限制,可以直接新建在components資料夾中)。

components資料夾

2. 在router.js(路由的配置檔案)中配置子路由。

router.js

3. 在footer.vue檔案中設定子路由錨點(router-link和router-view)。

footer.vue

4. 路由配置02文件中的main.js不變,直接執行專案。

 

如果要配置一個三級路由,配置方式和當前二級路由的配置方式是一樣的。



作者:_關耳_
連結:https://www.jianshu.com/p/fd57cdef7712
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。