VUE多層路由嵌套實(shí)現(xiàn)代碼
更新時(shí)間：2017年05月15日 16:02:08 作者：WakMeUp
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了VUE多層路由嵌套的具體代碼，供大家參考，具體內(nèi)容如下
先看看效果圖：
例如:在做系統(tǒng)時(shí)，主頁(yè)面有兩個(gè)功能【home】and【news】,在【home】下又分為登錄和注冊(cè)。
首先需要將各種模板進(jìn)行抽離。定義模板
<template id="home"> //home模板，里面含子視口 <div> <router-link to="/home/login">登錄</router-link> <router-link to="/home/zhuce">注冊(cè)</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模板下的注冊(cè) <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'}, //重定向?yàn)閔ome ，當(dāng)html后面哈希值為空時(shí)，默認(rèn)顯示home
{
path:'/home',
component:home, //模板注冊(cè)
redirect:'/home/login',//子視口的重定向 默認(rèn)登錄
children:[
{path:'/home/login',component:login}, //配置子模板
{path:'/home/zhuce',component:zhuce}
]},
{path:'/news',component:news}
];
var router=new VueRouter({ //實(shí)例化一個(gè)vuerouter
routes:rout
});
const app = new Vue({
router
}).$mount('#app')
當(dāng)Vue實(shí)例沒(méi)有el屬性時(shí)，則該實(shí)例尚沒(méi)有掛載到某個(gè)dom中；
假如需要延遲掛載，可以在之后手動(dòng)調(diào)用vm.$mount()方法來(lái)掛載。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們?cè)谧隽擞脩舻卿浐?就會(huì)讓用戶跳轉(zhuǎn)到個(gè)人中心,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue+Element做個(gè)個(gè)人中心的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在使用Element Plus中的table組件展示數(shù)據(jù)時(shí),由于需要對(duì)表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進(jìn)行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能
本文通過(guò)實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能，文中給大家補(bǔ)充介紹了vue實(shí)現(xiàn)密碼顯示隱藏切換功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友一起看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
今天小編就為大家分享一篇在vue中利用v-html按分號(hào)將文本換行的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
element-ui?table表格底部合計(jì)自定義配置過(guò)程
這篇文章主要介紹了element-ui?table表格底部合計(jì)自定義配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3使用mitt進(jìn)行組件通信的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-05-05
vue.js默認(rèn)路由不加載linkActiveClass問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于vue.js默認(rèn)路由不加載linkActiveClass問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的方法
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01