VUE多層路由巢狀

2021-08-01 03:07:06 字數 910 閱讀 9982

例如:在做系統時,主頁面有兩個功能【home】and【news】,在【home】下又分為登入和註冊。

首先需要將各種模板進行抽離。定義模板

id="home">  //home模板,裡面含子視口

to="/home/login">登入router-link>

to="/home/zhuce">註冊router-link>

router-view>

div>

template>

id="news"> //訊息模板

newsdiv>

template>

id="login"> //home模板下的登入

this is logindiv>

template>

id="zhuce"> //home模板下的註冊

this is zhucediv>

template>js下配置路由

const home=;

const news=;

const login=;

const zhuce=;

var rout=[

, //重定向為home ,當html後面雜湊值為空時,預設顯示home

, //配置子模板

]},];

var router=new vuerouter();

router

當vue例項沒有el屬性時,則該例項尚沒有掛載到某個dom中;

假如需要延遲掛載,可以在之後手動呼叫vm.$mount()方法來掛載。

vue 路由巢狀

路由巢狀的spa實現的步驟 a a 元件需要巢狀b元件 b 和c元件 c 準備巢狀其它組價的父元件 指定乙個容器 在a元件指定乙個容器 在a元件的路由配置物件中指定children屬性,補充 數字如果超出記錄的次數,是不行的。this.router.go num 如果num是正數,向前進 如果num...

Vue 實現 slot 多層巢狀

在引用一些框架時,通常他們自己就已經有插槽,但有時需要對插槽進行拓展 在基礎元件中引入了 mint ui 的mt header元件 並通過其提供的具名插槽向元件右側插入內容 但該元件是我們自定義的,我們並不知道元件被呼叫時會被插入什麼內容 所以在該元件中插入該具名插槽的內容也是乙個插槽 關鍵點在於這...

Vue 實現 slot 多層巢狀

在引用一些框架時,通常他們自己就已經有插槽,但有時需要對插槽進行拓展 在基礎元件中引入了 mint ui 的mt header元件 並通過其提供的具名插槽向元件右側插入內容 但該元件是我們自定義的,我們並不知道元件被呼叫時會被插入什麼內容 所以在該元件中插入該具名插槽的內容也是乙個插槽 關鍵點在於這...