VUE多層路由嵌套實現(xiàn)代碼
更新時間：2017年05月15日 16:02:08 作者：WakMeUp
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了VUE多層路由嵌套的具體代碼，供大家參考，具體內(nèi)容如下
先看看效果圖：
例如:在做系統(tǒng)時，主頁面有兩個功能【home】and【news】,在【home】下又分為登錄和注冊。
首先需要將各種模板進(jìn)行抽離。定義模板
<template id="home"> //home模板，里面含子視口 <div> <router-link to="/home/login">登錄</router-link> <router-link to="/home/zhuce">注冊</router-link> <router-view></router-view> </div> </template> <template id="news"> //消息模板 <div>news</div> </template> <template id="login"> //home模板下的登錄 <div>this is login</div> </template> <template id="zhuce"> //home模板下的注冊 <div>this is zhuce</div> </template>
JS下配置路由
const home={template:"#home"};
const news={template:'#news'};
const login={template:'#login'};
const zhuce={template:'#zhuce'};
var rout=[
{path:'/',redirect:'/home'}, //重定向為home ，當(dāng)html后面哈希值為空時，默認(rèn)顯示home
{
path:'/home',
component:home, //模板注冊
redirect:'/home/login',//子視口的重定向 默認(rèn)登錄
children:[
{path:'/home/login',component:login}, //配置子模板
{path:'/home/zhuce',component:zhuce}
]},
{path:'/news',component:news}
];
var router=new VueRouter({ //實例化一個vuerouter
routes:rout
});
const app = new Vue({
router
}).$mount('#app')
當(dāng)Vue實例沒有el屬性時，則該實例尚沒有掛載到某個dom中；
假如需要延遲掛載，可以在之后手動調(diào)用vm.$mount()方法來掛載。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在開發(fā)項目時遇到由于選擇了eslint導(dǎo)致的嚴(yán)格錯誤提示,如多個空格和多行報錯,解決方案包括在webpack.base.conf.js中進(jìn)行配置修改,創(chuàng)建項目時避免選擇eslint,本文給大家介紹了Vue關(guān)閉eslint檢測的多種方法,需要的朋友可以參考下2025-03-03
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡單解決辦法,需要的朋友可以參考下2024-04-04
vue實現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示功能
最近小編遇到這樣的問題，多組關(guān)鍵詞，這里實現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關(guān)鍵詞匹配改變字體顏色，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
這篇文章主要為大家介紹了簡單方法實現(xiàn)Vue?無限滾動組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
前端vue3打印功能實現(xiàn)(多頁打印、不使用插件)
在Vue項目中實現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實現(xiàn)的全部過程,文中介紹的方法實現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue同個按鈕控制展開和折疊同個事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中如何給el-table-column添加指定列的點擊事件
elementui中提供了點擊行處理事件,下面這篇文章主要給大家介紹了關(guān)于vue中如何給el-table-column添加指定列的點擊事件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了開發(fā)一個封裝iframe的vue組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
文章主要討論了在 Vue 開發(fā)中實現(xiàn)頁面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉(zhuǎn)等,并分別闡述了它們的優(yōu)缺點和適用情況,強(qiáng)調(diào)開發(fā)前應(yīng)周全考慮前端業(yè)務(wù)和用戶體驗,根據(jù)實際業(yè)務(wù)選擇合適方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁的示例代碼,本文通過定義defaultDialog .vue,結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08