2 changed files with 0 additions and 167 deletions
@ -1,165 +0,0 @@ |
|||
<template> |
|||
<div class="navmenu"> |
|||
<el-menu :active-text-color="variables.menuActiveText" :default-active="activeMenu" mode="horizontal" @select="handleSelect"> |
|||
<div v-for="item in routes" :key="item.path" class="navmenu"> |
|||
<app-link :to="resolvePath(item)"> |
|||
<el-menu-item v-if="!item.hidden" :index="item.path"> |
|||
{{ item.meta ? item.meta.title : item.children[0].meta.title }} |
|||
</el-menu-item> |
|||
</app-link> |
|||
</div> |
|||
</el-menu> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import AppLink from './Sidebar/Link' |
|||
import variables from '@/assets/styles/variables.scss' |
|||
import { isExternal } from '@/utils/validate' |
|||
|
|||
export default { |
|||
name: 'Topbar', |
|||
components: { |
|||
AppLink |
|||
}, |
|||
data() { |
|||
return { |
|||
routes: this.$store.getters.navMenus |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['device', 'user', 'baseApi']), |
|||
activeMenu() { |
|||
const route = this.$route |
|||
const { meta, path } = route |
|||
console.log(this.routes) |
|||
// if set path, the sidebar will highlight the path you set |
|||
if (meta.activeMenu) { |
|||
return meta.activeMenu |
|||
} |
|||
// 如果是首页,首页高亮 |
|||
if (path === '/dashboard') { |
|||
return '/' |
|||
} |
|||
// 如果不是首页,高亮一级菜单 |
|||
const activeMenu = '/' + path.split('/')[1] |
|||
return activeMenu |
|||
}, |
|||
variables() { |
|||
return variables |
|||
}, |
|||
sidebar() { |
|||
return this.$store.state.app.sidebar |
|||
}, |
|||
show: { |
|||
get() { |
|||
return this.$store.state.settings.showSettings |
|||
}, |
|||
set(val) { |
|||
this.$store.dispatch('settings/changeSetting', { |
|||
key: 'showSettings', |
|||
value: val |
|||
}) |
|||
} |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
// 通过当前路径找到二级菜单对应项,存到store,用来渲染左侧菜单 |
|||
initCurrentRoutes() { |
|||
const { path } = this.$route |
|||
console.log(this.routes) |
|||
let route = this.routes.find( |
|||
item => item.path === '/' + path.split('/')[1] |
|||
) |
|||
// 如果找不到这个路由,说明是首页 |
|||
if (!route) { |
|||
route = this.routes.find(item => item.path === '/') |
|||
} |
|||
this.$store.commit('permission/SET_CURRENT_ROUTES', route) |
|||
this.setSidebarHide(route) |
|||
}, |
|||
// 判断该路由是否只有一个子项或者没有子项,如果是,则在一级菜单添加跳转路由 |
|||
isOnlyOneChild(item) { |
|||
if (item.children && item.children.length === 1) { |
|||
return true |
|||
} |
|||
return false |
|||
}, |
|||
resolvePath(item) { |
|||
// 如果是个完成的url直接返回 |
|||
if (isExternal(item.path)) { |
|||
return item.path |
|||
} |
|||
// 如果是首页,就返回重定向路由 |
|||
if (item.path === '/') { |
|||
const path = item.redirect |
|||
return path |
|||
} |
|||
|
|||
// 如果有子项,默认跳转第一个子项路由 |
|||
let path = '' |
|||
/** |
|||
* item 路由子项 |
|||
* parent 路由父项 |
|||
*/ |
|||
const getDefaultPath = (item, parent) => { |
|||
// 如果path是个外部链接(不建议),直接返回链接,存在个问题:如果是外部链接点击跳转后当前页内容还是上一个路由内容 |
|||
if (isExternal(item.path)) { |
|||
path = item.path |
|||
return |
|||
} |
|||
// 第一次需要父项路由拼接,所以只是第一个传parent |
|||
if (parent) { |
|||
path += (parent.path + '/' + item.path) |
|||
} else { |
|||
path += ('/' + item.path) |
|||
} |
|||
// 如果还有子项,继续递归 |
|||
if (item.children) { |
|||
getDefaultPath(item.children[0]) |
|||
} |
|||
} |
|||
|
|||
if (item.children) { |
|||
getDefaultPath(item.children[0], item) |
|||
return path |
|||
} |
|||
|
|||
return item.path |
|||
}, |
|||
handleSelect(key, keyPath) { |
|||
// 把选中路由的子路由保存store |
|||
const route = this.routes.find(item => item.path === key) |
|||
this.$store.commit('SET_CURRENT_ROUTES', route) |
|||
this.setSidebarHide(route) |
|||
}, |
|||
// 设置侧边栏的显示和隐藏 |
|||
setSidebarHide(route) { |
|||
if (!route.children || route.children.length === 1) { |
|||
this.$store.dispatch('app/toggleSideBarHide', true) |
|||
} else { |
|||
this.$store.dispatch('app/toggleSideBarHide', false) |
|||
} |
|||
}, |
|||
toggleSideBar() { |
|||
this.$store.dispatch('app/toggleSideBar') |
|||
}, |
|||
open() { |
|||
this.$confirm('确定注销并退出系统吗?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.logout() |
|||
}) |
|||
}, |
|||
logout() { |
|||
this.$store.dispatch('LogOut').then(() => { |
|||
location.reload() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue