12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <el-menu
- background-color="#304156"
- text-color="#BFCBD9"
- active-text-color="#ffffff"
- :default-active="activeIndex"
- class="nav"
- @open="handleMenuOpen"
- @close="handleMenuClose"
- :collapse="isCollapse"
- >
- <p class="logo">{{ routeSetting.name }}</p>
- <template v-for="r in routes">
- <el-menu-item
- :key="r.path"
- v-if="!r.children"
- :data-to="r.path"
- :data-name="r.name"
- :index="r.path"
- @click="handleToPage"
- >
- <i v-if="r.icon" :class="r.icon"></i>
- <span slot="title">{{ r.name }}</span>
- </el-menu-item>
- <el-submenu v-else :key="r.path" :index="r.path">
- <template slot="title">
- <i v-if="r.icon" :class="r.icon"></i>
- <span slot="title">{{ r.name }}</span>
- </template>
- <el-menu-item
- @click="handleToPage"
- :data-to="r.path + c.path"
- :data-name="c.name"
- :index="r.path + c.path"
- v-for="c in r.children"
- :key="r.path + c.path"
- >
- <i v-if="c.icon" :class="c.icon"></i>
- <span slot="title">{{ c.name }}</span>
- </el-menu-item>
- </el-submenu>
- </template>
- </el-menu>
- </template>
- <script>
- import { routes, routeSetting } from "@/config/routes";
- export default {
- name: "SideNav",
- data: () => {
- return {
- isCollapse: false,
- routes,
- routeSetting,
- };
- },
- methods: {
- handleMenuOpen() {
- },
- handleMenuClose() {
- },
- handleToPage(e) {
- const path = e.$el.getAttribute("data-to");
- //const name = e.$el.getAttribute("data-name");
- //this.$store.commit("addNavTag", { name: name, path: path });
- //console.log(path)
- if (path !== this.$route.path) {
- this.$router.push(path);
- }
- },
- },
- computed: {
- activeIndex() {
- return this.$route.path;
- },
- },
- };
- </script>
- <style scoped>
- .logo {
- text-align: center;
- color: #ffffff;
- }
- </style>
|