當(dāng)當(dāng)當(dāng)當(dāng)當(dāng)~我又來了辈讶。
在項目里經(jīng)常會遇到側(cè)導(dǎo)航切換頁面的功能。
如果我們將側(cè)導(dǎo)航做成公共組件娄猫，來調(diào)用的話贱除，就會在每一個頁面都引用該組件，在后期維護的時候比較麻煩媳溺，比如改參數(shù)月幌。
所以此文將側(cè)導(dǎo)航做成父頁面組件，將切換的頁面做成子頁面悬蔽，這樣只需調(diào)用一次即可扯躺。大大減少了后期維護的麻煩
涉及功能點
- 側(cè)導(dǎo)航支持多級
- Vue Router的使用方法（官方文檔）
- 子父組件的寫法
- 樣式：elementUI
效果圖
實現(xiàn)
--- 目錄結(jié)構(gòu)
--- Vue Router的使用方法
首先安裝npm install vue-router。
然后在main.js中引入
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
--- vue頁面使用Vue Router
在App.vue里引用router-view屯阀。
router-view就相當(dāng)于一個容器缅帘，來渲染我們定義的路由
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
最好不要在App.vue里寫太多內(nèi)容轴术，把它作為祖父級展示就可以啦难衰，能預(yù)防新手使用的一些未知錯誤，如打包出錯之類的逗栽。
所以盖袭，我在在App.vue里引用router-view只渲染根頁面，而components/page下新建了一個index.vue頁面彼宠，用來放側(cè)導(dǎo)航和渲染子頁面
<template>
<div>
<!--v-sidebar是側(cè)導(dǎo)航-->
<v-sidebar ></v-sidebar>
<div class="content" :style="{height: (this.$store.state.bodyHeight-20) + 'px',overflow:'auto'}">
<div></div>
<transition name="move" mode="out-in">
<!--這里的router-view用來渲染子頁面-->
<router-view></router-view>
</transition>
</div>
</div>
</template>
<script>
//引入側(cè)導(dǎo)航組件
import vSidebar from '../common/sideMenu.vue';
export default {
data() {
return {}
},
components:{
//注冊側(cè)導(dǎo)航組件
vSidebar
},
}
</script>
到此整個側(cè)導(dǎo)航切換路由的頁面結(jié)構(gòu)已經(jīng)完成了
如果你想了解鳄虱，怎么實現(xiàn)多級導(dǎo)航，那么可以繼續(xù)向下看~
我將路由都提出來寫在了單獨的文件里凭峡，這樣方便統(tǒng)一維護管理
在router的index.js將頁面路由的名字和引用路徑都寫好
import Router from 'vue-router';
Vue.use(Router);
export default new Router(
{
routes: [
{
path: '/',
name: 'main', component: main,
children: [
{
path: '/inputDisabled',
component: resolve => require(['../components/page/input/index.vue'], resolve),
meta: {title: '禁止輸入'},
},
{
path: '/indexSelect',
component: resolve => require(['../components/page/input/indexSelect.vue'], resolve),
meta: {title: 'select聯(lián)動'},
},
{
path: '/loadMoreUp',
component: resolve => require(['../components/page/loadMore/loadMoreUp.vue'], resolve),
meta: {title: '下拉刷新'},
},
],
},
]
})
--- 側(cè)導(dǎo)航來啦~
我用的是elementUI里的導(dǎo)航插件拙已。
注意
菜單數(shù)據(jù)結(jié)構(gòu)，我這里寫的是嵌套結(jié)構(gòu)摧冀，父級套子級倍踪。
而不是并級系宫，用標(biāo)識來區(qū)分。
代碼思路就是循環(huán)套循環(huán)
<template>
<div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened router
collapse-transition>
<template v-for="item in items" v-cloak>
<template v-if="item.subset.length!==0">
<el-submenu :index="item.url" :key="item.url">
<template slot="title">
<!--<img :src="item.icon" style="width: 20px;height: 20px"/>-->
<span slot="title">{{ item.name }}</span>
</template>
<el-menu-item v-for="(subItem,i) in item.subset" :key="i" :index="subItem.url">
<!--<img :src="subItem.icon" style="width: 20px;height: 20px"/>-->
<span slot="title">{{ subItem.name }}</span>
</el-menu-item>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.url" :key="item.url">
<!--<img :src="item.icon" style="width: 20px;height: 20px"/>-->
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
collapse: false,
items: [{
name: "elementUI之input",
url: "",
subset: [
{name: "禁止輸入", url: "/inputDisabled", subset: []},
{ name: "select聯(lián)動", url: "/indexSelect", subset: []
}]
}, {name: "手機下拉刷新", url: "/loadMoreUp", subset: []}]
}
},
computed: {
onRoutes() {
//當(dāng)前激活菜單的 index
return this.$route.path.replace('/', '');
}
},
}
</script>
OK 大功告成~
歡迎交流和指正~~
喜歡你就點點贊建车，哈哈哈哈哈哈哈
