上一次給大家簡單說了下什么是動態(tài)路由現(xiàn)在我們來講講嵌套路由。
GitHub：https://github.com/Ewall1106/mall
使用場景
- 嵌套路由的使用場景是什么呢？
- 大家都知道選項卡，在選項卡中，頂部有數(shù)個導航欄，中間的主體顯示的是內容。這個時候，整個頁面是一個路由，然后點擊選項卡切換不同的路由來展示不同的內容，這時候就可以用嵌套路由來實現(xiàn)。
具體實現(xiàn)
- 為了演示，我們現(xiàn)在
view文件夾下新建一個title1.vue和title2.vue用來存放不同的內容
title1.vue
title2.vue
- 現(xiàn)在我們在
router > index.js中將這上面兩個新建的組件引入進來并填寫路徑，這里的Title1和Title2是作為test.vue頁面的子路由，所以要寫在children屬性下。 - 這里需要提個醒的就是填寫
children子路由的path不要加/。
路由配置
- 然后我們再去到
test.vue中編寫。 - 在這里提個醒，在
to后面寫路由路徑的時候，要把test這個父路由路徑寫進去即/test/title1：
test.vue
- 最后我們進入瀏覽器點擊不同的標題就可以看到不同內容的展示
localhost
點擊標題
