菜单预览.png
1、AsideBar
class="el-menu-vertical-demo"
router
:default-active="activeMenu"
background-color="#263238"
text-color="#8a979e"
active-text-color="#fff">
v-for="router in routers"
:router="router"
:key="router.path"
>
import { mapGetters } from 'vuex'
import asideBarItem from './asideBarItem'
export default {
name: 'asideBar',
components: {
asideBarItem
},
data () {
return {
}
},
computed: {
routers () {
console.log(this.$store.state.permission.routers)
return this.$store.state.permission.routers
},
...mapGetters([
'permission_routes'
]),
activeMenu () {
const route = this.$route
const {meta, path} = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
}
}
.aside-container {
height: inherit;
}
2、asideBarItem
:index="router.path"
v-if="router.hasOwnProperty('children')" >
{{router.name}}
v-for="child in router.children" :key="child.path"
:router="child"
>
v-else
:key="router.path"
:index="router.path">
{{router.name}}
// hasOwnProperty可以用来检测一个对象是否含有特定的自身属性
export default {
name: 'asideBarItem',
components: {},
props: {
router: {
type: Object
}
},
data () {
return {
iconArr:['img9', 'img8', 'img10']
}
},
computed: {
// router () {
// return this.$router.options.routes
// }
},
watch: {},
methods: {},
created () {
},
mounted () {
}
}
.asideBarItem-container {
.el-submenu__title{
font-size: 16px!important;
}
}
3、home.vue
退出登录
{{item.name}}
import asideBar from '@/components/AsideBar'
import appMain from '@/components/AppMain'
export default {
name: 'index',
components: {
asideBar,
appMain
},
data () {
return {
levelList: null,
tagsList:[]
}
},
computed: {
},
watch: {
$route () {
this.getBreadcrumb()
}
},
methods: {
getBreadcrumb () {
// $route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
let matched = this.$route.matched.filter(item => item.name)
this.levelList = matched
},
loginOut (){
sessionStorage.removeItem('token');
this.$router.push('/login')
}
},
created () {
this.getBreadcrumb()
},
mounted () {
}
}
body > .el-container {
margin-bottom: 40px;
}
#index-container {
height: 100%;
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #263238;
color: #333;
text-align: left;
line-height: 200px;
}
.el-main {
background-color: #fff;
color: #333;
height: 100%;
min-height: 885px;
padding: 0 20px 20px 20px;
}
.el-dropdown-link img{
}
}