|
|
@@ -4,10 +4,10 @@
|
|
|
<div class="menu">
|
|
|
<ul class="menu_ul">
|
|
|
<li
|
|
|
- v-for="(item, index) in menuList"
|
|
|
- :key="index"
|
|
|
- :class="{ active: item.isActive }"
|
|
|
- @click="menuClick(item.index, $event)"
|
|
|
+ v-for="item in $store.state.menuList"
|
|
|
+ :key="item.path"
|
|
|
+ :class="{ active: $route.path == item.path }"
|
|
|
+ @click="$router.push(item.path)"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
</li>
|
|
|
@@ -19,57 +19,20 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
- menuList: [
|
|
|
- { index: 1, path: "/", label: "首页", isActive: true },
|
|
|
- { index: 2, path: "/sksjgl", label: "时空数据管理", isActive: false },
|
|
|
- // { index: 3, path: "/skmh/scene", label: "二维GIS引擎", isActive: false },
|
|
|
- { index: 4, path: "/skmh", label: "时空门户", isActive: false },
|
|
|
- { index: 5, path: "/wgn", label: "微功能", isActive: false },
|
|
|
- { index: 6, path: "/yygl", label: "应用管理", isActive: false },
|
|
|
- { index: 7, path: "/yxgl", label: "运行管理", isActive: false },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 初始化判断路径并自动选中菜单
|
|
|
- let path = this.$route.path;
|
|
|
- console.log(path);
|
|
|
- this.menuList.map(function (item) {
|
|
|
- if (item.path == path) {
|
|
|
- item.isActive = true;
|
|
|
- } else {
|
|
|
- item.isActive = false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- menuClick(index) {
|
|
|
- let that = this;
|
|
|
- this.menuList.map(function (item) {
|
|
|
- if (item.index == index) {
|
|
|
- item.isActive = true;
|
|
|
- that.$router.push(item.path);
|
|
|
- } else {
|
|
|
- item.isActive = false;
|
|
|
- }
|
|
|
- });
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$emit("updateScroll");
|
|
|
- });
|
|
|
- },
|
|
|
+ return {};
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ methods: {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
#header {
|
|
|
- width: 100%;
|
|
|
+ width: 100vw;
|
|
|
height: 70px;
|
|
|
background: linear-gradient(180deg, #2c2f74, #494d98);
|
|
|
color: #ffffff;
|
|
|
margin: 0 auto;
|
|
|
-
|
|
|
.logo {
|
|
|
display: inline-block;
|
|
|
height: 70px;
|