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)文章
我們在做了用戶登錄后,就會讓用戶跳轉(zhuǎn)到個人中心,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue+Element做個個人中心的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在使用Element Plus中的table組件展示數(shù)據(jù)時,由于需要對表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進(jìn)行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue導(dǎo)入Echarts實現(xiàn)折線散點圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
本文通過實例代碼給大家介紹了vue實現(xiàn)個人信息查看和密碼修改功能，文中給大家補充介紹了vue實現(xiàn)密碼顯示隱藏切換功能，非常不錯，具有一定的參考借鑒價值，感興趣的朋友一起看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定的簡單實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
今天小編就為大家分享一篇在vue中利用v-html按分號將文本換行的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3使用mitt進(jìn)行組件通信的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-05-05
vue.js默認(rèn)路由不加載linkActiveClass問題的解決方法
這篇文章主要給大家介紹了關(guān)于vue.js默認(rèn)路由不加載linkActiveClass問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)頁面刷新以及局部刷新的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01