<!--
|
* @Description: 导航菜单
|
* @Author: 王旭
|
* @Date: 2022-03-03 17:18:01
|
* @LastEditTime: 2022-03-08 16:40:34
|
* @LastEditors: 王旭
|
-->
|
<template>
|
<div class="">
|
<el-menu :default-active="`${pathName}`" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
|
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
|
<el-menu-item index="/gisServerList">
|
<i class="el-icon-s-order"></i>
|
<span slot="title">发布数据列表</span>
|
</el-menu-item>
|
<el-menu-item index="/journal">
|
<i class="el-icon-menu"></i>
|
<span slot="title">日志查看</span>
|
</el-menu-item>
|
<!-- <el-submenu index="1">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>导航一</span>
|
</template>
|
</el-submenu> -->
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
pathName: "",
|
};
|
},
|
watch: {
|
// 监听,当路由发生变化的时候执行
|
$route(to, from) {
|
this.pathName = to.path;
|
},
|
},
|
//方法集合
|
methods: {
|
handleOpen(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
handleClose(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
},
|
created() {
|
//当前路由高亮
|
this.pathName = this.$route.path;
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.el-menu {
|
width: 100%;
|
}
|
</style>
|
