vue巢狀路由

2022-04-28 10:46:14 字數 1608 閱讀 2138

在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 vuerouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。

index.html，只有乙個路由出口

1


<


div 


id>23


<


router-view


>


router-view


>


4div


>
main.js，路由的重定向，就會在頁面一載入的時候，就會將home元件顯示出來，因為重定向指向了home元件，redirect的指向與path的必須一致。children裡面是子路由，當然子路由裡面還可以繼續巢狀子路由。

1


import vue from 'vue' 


2import vuerouter from 'vue-router' 


3vue.use(vuerouter) 45


//引入兩個元件 


6import home from "./home.vue" 


7import game from "./game.vue" 


8//定義路由 


9const routes = [ 


10,//重定向,指向了home元件 


11 


15] 


16} 


17] 


18//建立路由例項 


19const router = new vuerouter() 


2021


new vue(, 


25methods: , 


27router 


28 })
home.vue，點選顯示就會將子路由顯示在出來，子路由的出口必須在父路由裡面，否則子路由無法顯示。

1


<


template


>


2<


div>


3<


h3>首頁


h3>


4<


router-link 


to="/home/game"


>


5<


button


>顯示<


tton


>


6router-link


>


7<


router-view


>


router-view


>


8div


>


9template


>
game.vue

1


<


template


>


2<


h3>遊戲


h3>


3template


>
執行後的結果：

點選顯示後：

Vue巢狀路由

src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...

vue 巢狀路由

在乙個頁面中如果想實現三個頁面的拼接組成乙個頁面，這時候就用到巢狀路由了。第一種方法 1.頂部頁面 views home.vue class drophead 個人資訊 退出2.左側欄頁面 view menusecond.vue 3.右側欄頁面 view menuthird.vue 需簽約檢視 路由...

Vue路由機制 巢狀路由

doctype html html head meta charset utf 8 title vue路由機制 巢狀路由 title head body div id router link to user user router link router link to reg reg router...