vue+element頭部加側邊欄導航
阿新 • • 發佈：2021-02-17
vue element頭部加側邊欄導航
index.vue
<template> <div class="layout"> <head></head> <side v-if="leftMenu && leftMenu.length > 0"></side> <div class="center"> <BreadCrumbs v-if="leftMenu && leftMenu.length > 0"></BreadCrumbs> <router-view /> </div> </div> </template> <script> import head from '@/components/layout/Head.vue' import side from '@/components/layout/Side.vue' import BreadCrumbs from '@/components/layout/BreadCrumbs.vue' export default { name: 'Header', components: { head, side, BreadCrumbs }, data() { return {} }, watch: {}, computed: { leftMenu() { return this.$store.getters.leftMenu } }, methods: {}, mounted() {} }
Head.vue
<template> <div class="header"> <div class="logo"> <div class="img flex-hv-center left"> <img src="../../assets/img/logo1.png" /> </div> </div> <div class="headCenter"> <!--頂部選單--> <ul role="menubar" class="menubar"> <li role="menuitem" class="menubaritem" :class="{ 'is-active': currentTopMenuId === item.id }" v-for="(item, key) in menuInfo" :key="key" @click="changeMenu(item, key)" > {{ item.menuName }} </li> </ul> <img src="../../assets/img/head1.png" alt="" class="headCenterimg" :style="{ left: left + '%' }" /> </div> <div class="user-menu flex-hv-center right" @click="logout()" style="z-index:99;"> <img src="../../assets/img/loginout.png" alt="" class="headCenterimg" style="margin-right:10px" /> <span>退出登入</span> </div> </div> </template>
side.vue
<template> <div class="side"> <el-menu class="custom-side-menu" :default-active="now" router> <template v-for="itemMenu in leftMenu"> <el-menu-item :index="itemMenu.menuPath" :key="itemMenu.menuPath"> <i></i> <span slot="title">{{ itemMenu.menuName }}</span> </el-menu-item> </template> </el-menu> </div> </template> <script> export default { name: 'side1', data() { return { now: '/index' } }, watch: { $route: { handler: function() { this.now = this.$route.path }, deep: true } }, computed: { leftMenu() { return this.$store.getters.leftMenu } }, methods: {}, mounted() { this.now = this.$route.path } } </script>
BreadCrumbs
template>
<div class="model-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item
v-for="(item, index) in breadcrumb"
:key="index"
:to="{ path: item.menuPath }"
>{{ item.menuName }}</el-breadcrumb-item
>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: 'BreadCrumbs1',
data() {
return {
now: '/index',
breadcrumb: [],
leftMenu: null,
now: ''
}
},
watch: {
$route: {
handler: function() {
this.$store.commit('judgeButtonPermission', this.$route.path)
this.determineRoute()
},
deep: true
}
},
computed: {
menuInfo() {
return this.$store.getters.menuInfo
}
},
methods: {
determineRoute() {
this.now = this.$route.path
let breadcrumbs = []
this.breadcrumb = []
this.menuInfo.map(item => {
if (this.now === item.menuPath) {
breadcrumbs.push(item)
} else {
if (item.children) {
item.children.map(el => {
if (this.now === el.menuPath) {
breadcrumbs.push({
id: item.id,
menuName: item.menuName,
menuPath: item.children[0].menuPath
})
breadcrumbs.push(el)
}
})
}
}
})
this.breadcrumb = breadcrumbs
}
},
mounted() {
this.determineRoute()
}
}
</script>