路由通過children關鍵字設定子路由

2021-10-14 04:06:03 字數 1856 閱讀 3546

子路由

通過children關鍵字給路由設定子路由。

第3級別元件做應用的時候需要設定路由,並且與第2級別元件路由有形成父子關係,故稱為子路由。

案例

​ 給music元件建立子級元件,同時建立並應用子路由。建立元件切換顯示專案,要求有3個級別元件。

步驟

建立第3級別的業務元件,在components/yinyue/ 目錄下建立dalu.vue、hongkong.vue 2個元件,內容分別如下:

>

>

大陸系列**div

>

template

>

>

>

香港系列**div

>

template

>

在main.js檔案中引入第3級別業務元件,並給music二級元件通過children關鍵字配置為子路由。

// 匯入第三層級業務元件

import hongkong from

'./components/yinyue/hongkong.vue'

import dalu from

'./components/yinyue/dalu.vue'

// 註冊路由中的相關元件

// 路由中有兩個元件( )被進場使用

// a. 單獨註冊

// vue.component('router-link',***)

// vue.component('router-view',***)

// b. 一併註冊,一次性把所有的元件都註冊好,更高效

vue.

use(vuerouter)

// 外掛程式

// 建立乙個路由物件

const router =

newvuerouter

(// // a 重定向執行 b,,

,]},

在music.vue中設定 切換按鈕 和 元件顯示佔位符。

>

>

>

**列表展示span

>

>

"/music/hongkong"

>

香港router-link

>

"/music/dalu"

>

大陸router-link

>

p>

"soncont"

>

>

router-view

>

p>

div>

template

>

注意

要通過children關鍵字設定子路由。

第**別元件對應的切換按鈕(router-link) 和顯示佔位符(router-view) 需要在music.vue元件中設定。

給第**元件設定重定向 和 按鈕啟用高亮 效果。

重定向

在main.js中給子路由配置重定向:

, // b.子路由重定向配置,]

},按鈕高亮

在src/components/music.vue中配置,router-link-active設定按鈕高亮。

new關鍵字 this關鍵字 base關鍵字

使用new,所做的三件事 1.類是引用物件,引用物件是在堆中開闢空間 在堆中開闢空間 2.在開闢的堆空間中建立物件 3.呼叫物件的構建函式 4.隱藏父類成員 子類的成員可以與隱藏從父類繼承的成員,類似於重寫。public new void sayhello this關鍵字的使用 1.代表當前類的物件...

this關鍵字 static關鍵字

1.當成員變數和區域性變數重名,可以用關鍵字this來區分 this 代表物件,代表那個物件呢?當前物件 this就是所在函式所屬物件的引用 簡單說 那個物件呼叫了this所在的函式,this就代表哪個物件 this也可以用於在建構函式中呼叫其他建構函式 注意 只能定義在建構函式的第一行,因為初始化...

base關鍵字 this關鍵字

用於在派生類中實現對基類公有或者受保護成員的訪問,但是只侷限在建構函式 例項方法和例項屬性訪問器中。功能主要包括 1 呼叫基類上已被其他方法重寫的方法。2 指定建立派生類例項時應呼叫的基類建構函式。base常用於,在派生類物件初始化時和基類進行通訊。base可以訪問基類的公有成員和受保護成員,私有成...