vue 路由 4 巢狀路由》

2022-09-09 08:42:09 字數 903 閱讀 7848

點選about後,新聞和體育屬於about的子路由呼叫的頁面

路由裡使用children屬性可以實現路由的巢狀

注:主要是標紅的幾個檔案

重新編寫這幾個檔案中的**

index.js

//引入路由

import from 'vue-router'

import home from '../views/home.vue'

//定義路由

const routes = [,

, ,

] }]

//建立路由

const router = createrouter()

//返回了路由

export default router

home |

about |

home.vue

home page

about.vue

新聞|		體育| 		

aboutnews.vue

aboutsport.vue

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巢狀路由

在實際專案中我們會碰到多層巢狀的元件組合而成,但是我們如何實現巢狀路由呢?因此我們需要在 vuerouter 的引數中使用 children 配置,這樣就可以很好的實現路由巢狀。index.html,只有乙個路由出口 1 div id 23 router view router view 4div ...