溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了ElementUI復雜頂部和左側導航欄怎么實現的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇ElementUI復雜頂部和左側導航欄怎么實現文章都會有所收獲，下面我們一起來看看吧。
描述：如圖
項目路徑如下圖所示：
代碼實現：
首先在store.js中添加兩個狀態：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
topNavState: 'home',
leftNavState: 'home'
}
export default new Vuex.Store({
state
})App.vue內容：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>main.js代碼：
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import store from './store.js'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import '@/assets/css/style.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
el: '#app',
render: h => h(App)
})router/index.js文件聲明路由：
其中：行程計劃、任務、通訊錄屬于首頁大板塊（topNavState=“home”）；企業信息、車輛信息、部門信息都屬于enterprise這一大板塊（topNavState=“enterprise”）
import Vue from 'vue'
import Router from 'vue-router'
import LeftNav from '@/components/nav/leftNav.vue'
import Home from '@/views/home.vue'
import Dashboard from '@/views/workbench/dashboard.vue'
import Mission from '@/views/workbench/mission/mission.vue'
import Plan from '@/views/workbench/plan.vue'
import Maillist from '@/views/workbench/maillist.vue'
import EnterpriseList from '@/views/enterprise/index.vue'
import EnterpriseAdd from '@/views/enterprise/add.vue'
import EnterpriseDetail from '@/views/enterprise/detail.vue'
import EnterpriseValidate from '@/views/enterprise/validate.vue'
import VehicleManage from '@/views/vehicle/index.vue'
import DeptManager from '@/views/dept/index.vue'
import NotFound from '@/components/404.vue'
// 懶加載方式，當路由被訪問的時候才加載對應組件
const Login = resolve => require(['@/views/login'], resolve)
Vue.use(Router)
let router = new Router({
routes: [
{
path: '/login',
type: 'login',
component: Login
},
{
path: '*',
component: NotFound
},
{
path: '/',
type: 'home', // 根據type區分不同模塊（頂部導航）
name: 'home', // 根據name區分不同子模塊（左側導航）
redirect: '/dashboard',
component: Home,
menuShow: true,
children: [
{
path: '/dashboard',
component: LeftNav,
name: 'dashboard', // 當前路由的name
leaf: true, // 只有一個節點
iconCls: 'iconfont icon-home', // 圖標樣式class
menuShow: true,
children: [
{ path: '/dashboard', component: Dashboard, name: '首頁', menuShow: true }
]
},
{
path: '/mySet',
component: LeftNav,
name: '我的設置',
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/mySet/plan', component: Plan, name: '行程計劃', menuShow: true },
{ path: '/mySet/mission', component: Mission, name: '我的任務', menuShow: true },
{ path: '/mySet/maillist', component: Maillist, name: '通訊錄', menuShow: true }
]
}
]
},
{
path: '/enterpriseManager',
type: 'enterprise',
name: 'enterprise',
component: Home,
redirect: '/enterprise/list',
menuShow: true,
children: [
{
path: '/enterpriseList',
component: LeftNav,
name: 'enterpriseList',
leaf: true, // 只有一個節點
iconCls: 'iconfont icon-home', // 圖標樣式class
menuShow: true,
children: [
{ path: '/enterprise/list', component: EnterpriseList, name: '企業列表', menuShow: true },
{ path: '/enterprise/detail', component: EnterpriseDetail, name: '企業詳情', menuShow: false }
]
},
{
path: '/enterpriseAdd',
component: LeftNav,
name: 'enterpriseAdd',
leaf: true, // 只有一個節點
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/add', component: EnterpriseAdd, name: '企業添加', menuShow: true }
]
},
{
path: '/enterpriseValidate',
component: LeftNav,
name: 'enterpriseValidate',
leaf: true, // 只有一個節點
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/validate', component: EnterpriseValidate, name: '企業認證', menuShow: true }
]
}
]
},
{
path: '/vehicleManager',
type: 'enterprise',
name: 'vehicle',
component: Home,
redirect: '/vehicle/list',
menuShow: true,
children: [
{
path: '/vehicleList',
component: LeftNav,
name: 'vehicleList',
leaf: true, // 只有一個節點
iconCls: 'iconfont icon-home', // 圖標樣式class
menuShow: true,
children: [
{ path: '/vehicle/list', component: VehicleManage, name: '車輛信息', menuShow: true }
]
}
]
},
{
path: '/deptManager',
type: 'enterprise',
name: 'dept',
component: Home,
redirect: '/dept/list',
menuShow: true,
children: [
{
path: '/deptList',
component: LeftNav,
name: 'deptList',
leaf: true, // 只有一個節點
iconCls: 'iconfont icon-home', // 圖標樣式class
menuShow: true,
children: [
{ path: '/dept/list', component: DeptManager, name: '部門信息', menuShow: true }
]
}
]
}
]
});
router.beforeEach((to, from, next) => {
// console.log('to:' + to.path)
if (to.path.startsWith('/login')) {
window.localStorage.removeItem('access-user')
next()
} else if(to.path.startsWith('/register')){
window.localStorage.removeItem('access-user')
next()
} else {
let user = JSON.parse(window.localStorage.getItem('access-user'))
if (!user) {
next({path: '/login'})
} else {
next()
}
}
});
export default router特別說明：
這里的路由對象router ，設置的是最多三級，一級路由主要對應的是頂部導航和其他無子頁面的路由，二級和三級路由分別對應的是左側導航的一級和二級菜單（比如三級路由對應的就是左側導航的二級菜單），二級路由設置leaf屬性，值為true表明該路由下沒有子菜單（如果該路由下的某頁面不顯示在左側導航，不算子菜單）。
leftNav.vue文件中主要是左側導航菜單加載代碼：
<template>
<el-col :span="24" class="main">
<!--左側導航-->
<aside :class="{showSidebar:!collapsed}">
<!--展開折疊開關-->
<div class="menu-toggle" @click.prevent="collapse">
<i class="iconfont icon-outdent" v-show="!collapsed" title="收起"></i>
<i class="iconfont icon-indent" v-show="collapsed" title="展開"></i>
</div>
<!--導航菜單-->
<el-menu :default-active="$route.path" router :collapse="collapsed" ref="leftNavigation">
<template v-for="(issue,index) in $router.options.routes">
<template v-if="issue.name === $store.state.leftNavState"><!-- 注意：這里就是leftNavState狀態作用之處，當該值與router的根路由的name相等時加載相應菜單組 -->
<template v-for="(item,index) in issue.children">
<el-submenu v-if="!item.leaf" :index="index+''" v-show="item.menuShow">
<template slot="title"><i :class="item.iconCls"></i><span slot="title">{{item.name}}</span></template>
<el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow"
:class="$route.path==term.path?'is-active':''">
<i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path"
:class="$route.path==item.children[0].path?'is-active':''" v-show="item.menuShow">
<i :class="item.iconCls"></i><span slot="title">{{item.children[0].name}}</span>
</el-menu-item>
</template>
</template>
</template>
</el-menu>
</aside>
<!--右側內容區-->
<section class="content-container">
<div class="grid-content bg-purple-light">
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</div>
</section>
</el-col>
</template>
<script>
export default {
name: 'leftNav',
data () {
return {
collapsed: false
}
},
methods: {
//折疊導航欄
collapse: function () {
this.collapsed = !this.collapsed;
},
// 左側導航欄根據當前路徑默認打開子菜單（如果當前路由是三級，則父級子菜單默認打開）
defaultLeftNavOpened () {
let cur_path = this.$route.path; //獲取當前路由
let routers = this.$router.options.routes; // 獲取路由對象
let subMenuIndex = 0, needOpenSubmenu = false;
for (let i = 0; i < routers.length; i++) {
let children = routers[i].children;
if(children){
for (let j = 0; j < children.length; j++) {
if (children[j].path === cur_path) {
break;
}
// 如果該菜單下有子菜單(個數>1且設置的leaf為false才有下拉子菜單)
if(children[j].children && !children[j].leaf) {
let grandChildren = children[j].children;
for(let z=0; z<grandChildren.length; z++) {
if(grandChildren[z].path === cur_path) {
subMenuIndex = j;
needOpenSubmenu = true;
break;
}
}
}
}
}
}
if(this.$refs['leftNavigation'] && needOpenSubmenu) {
this.$refs['leftNavigation'].open(subMenuIndex); // 打開子菜單
}
},
},
mounted() {
this.defaultLeftNavOpened();
}
}
</script>home.vue是后臺主頁組件代碼
<template>
<el-row class="container">
<!--頭部-->
<el-col :span="24" class="topbar-wrap">
<div class="topbar-logo topbar-btn">
<a href="/" rel="external nofollow" rel="external nofollow" ><img src="../assets/logo.png" ></a>
</div>
<div class="topbar-logos" v-show="!collapsed">
<a href="/" rel="external nofollow" rel="external nofollow" >車車綜合管理</a>
</div>
<div class="topbar-title">
<el-row v-show="$store.state.topNavState==='home'"><!-- 注意：這里就是topNavState作用之處，根據當前路由所在根路由的type值判斷顯示不同頂部導航菜單 -->
<el-col :span="24">
<el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
<el-menu-item index="/">工作臺</el-menu-item>
<el-menu-item index="/enterpriseManager">企業管理</el-menu-item>
<el-menu-item index="/orderManager">訂單管理</el-menu-item>
<el-menu-item index="/systemManager">系統管理</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row v-show="$store.state.topNavState==='enterprise'">
<el-col :span="24">
<el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
<el-menu-item index="/enterpriseManager">企業信息</el-menu-item>
<el-menu-item index="/vehicleManager">車輛信息</el-menu-item>
<el-menu-item index="/deptManager">組織架構</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
<div class="topbar-account topbar-btn">
<el-dropdown trigger="click">
<span class="el-dropdown-link userinfo-inner">
<i class="iconfont icon-user"></i> {{nickname}} <i class="el-icon-caret-bottom"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div @click="jumpTo('/user/profile')"><span >個人信息</span></div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="jumpTo('/user/changepwd')"><span >修改密碼</span></div>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登錄</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
<!--中間-->
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-row>
</template>
<script>
export default {
name: 'home',
data () {
return {
defaultActiveIndex: "/",
loading: false,
nickname: '',
collapsed: false
}
},
created() {// 組件創建完后獲取數據，
// 此時 data 已經被 observed 了
this.fetchNavData();
},
methods: {
handleSelect(index){
this.defaultActiveIndex = index;
},
//折疊導航欄
collapse () {
this.collapsed = !this.collapsed;
},
fetchNavData () { // 初始化菜單激活項
var cur_path = this.$route.path; //獲取當前路由
var routers = this.$router.options.routes; // 獲取路由對象
var nav_type = "", nav_name = "";
for (var i = 0; i < routers.length; i++) {
var children = routers[i].children;
if(children){
for (var j = 0; j < children.length; j++) {
var grand_children = children[j].children;
if(grand_children){
for (var k = 0; k < grand_children.length; k++) {
if (grand_children[k].path === cur_path) {
nav_type = routers[i].type;
nav_name = routers[i].name;
break;
}
// 如果該菜單下還有子菜單
if(children[j].children) {
let grandChildren = children[j].children;
for(let z=0; z<grandChildren.length; z++) {
if(grandChildren[z].path === cur_path) {
nav_type = routers[i].type;
nav_name = routers[i].name;
break;
}
}
}
}
}
}
}
}
this.$store.state.topNavState = nav_type; // 改變topNavState狀態的值
this.$store.state.leftNavState = nav_name; // 改變leftNavState狀態的值
if(nav_type == "home"){
this.defaultActiveIndex = "/";
} else {
this.defaultActiveIndex = "/" + nav_name + "Manager";
}
},
jumpTo(url){
this.defaultActiveIndex = url;
this.$router.push(url); //用go刷新
},
logout(){
//logout
let that = this;
this.$confirm('確認退出嗎?', '提示', {
confirmButtonClass: 'el-button--warning'
}).then(() => {
//確認
localStorage.removeItem('access-user');
that.$router.go('/login'); //用go刷新
}).catch(() => {});
}
},
mounted() {
let user = localStorage.getItem('access-user');
if (user) {
user = JSON.parse(user);
this.nickname = user.nickname || '';
}
},
watch: {
'$route': 'fetchNavData' //監聽router值改變時，改變導航菜單激活項
}
}
</script>注意fetchNavData()這個方法，主要是根據當前跳轉的路由，去找到這個路由對應的type（對應頂部導航欄的分類）和name（對應左側導航欄的分類），然后保存type和name到$store中，這樣在頂部導航可以根據$store中的type顯示相應的菜單，同樣在左側導航就可以取到這個name值并顯示相應的左側菜單欄了。
之前寫的左側導航欄（leftNav.vue）的代碼有個不足的地方——當前打開頁面是三級路由（也就是左側導航的二級菜單）時，刷新當前頁，（在左側導航中）當前路由所屬的一級菜單沒有默認打開。
解決方案已修改，在leftNav.vue中添加defaultLeftNavOpened()方法，詳情可以回看leftNav.vue的代碼。
ElementUI+命名視圖實現復雜頂部和左側導航欄
補充：
今天有位細心的網友發現了一個小問題：
左側導航當前激活的是非第一個菜單時，切換其他頂部導航再切換回來，會有兩個激活的菜單。
解決：el-menu標簽缺少default-active屬性設置，加上即可。
<el-menu :default-active="$route.path" router :collapse="collapsed" ref="leftNavigation"> <!-- ... --> </el-menu>
關于“ElementUI復雜頂部和左側導航欄怎么實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“ElementUI復雜頂部和左側導航欄怎么實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
