问题一
element顶部导航icon图标在渲染时图标不显示,修改了E:\BaiduNetdiskDownload\vue-el-admin-navlinkage-master\src\layout\components\Topbar.vue文件19行的代码解决
<i :class="item.meta ? item.meta.icon : item.children[0].meta.icon"></i>
<span>{{ item.meta ? item.meta.title : item.children[0].meta.title }}</span>
<template><div class="top-nav"><div class="log"><img :src="avatar+'?imageView2/1/w/25/h/25'" class="logo" style="display: inline-block;vertical-align: middle"><span style="display: inline-block;vertical-align: middle;font-size:18px">路游广告投放平台</span></div><hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /><el-menu:active-text-color="variables.menuActiveText":default-active="activeMenu"mode="horizontal"@select="handleSelect"><div v-for="item in routes" :key="item.path" class="nav-item"><app-link :to="resolvePath(item)"><el-menu-itemv-if="!item.hidden":index="item.path"><i :class="item.meta ? item.meta.icon : item.children[0].meta.icon"></i><span>{{ item.meta ? item.meta.title : item.children[0].meta.title }}</span></el-menu-item></app-link></div></el-menu><div class="right-menu"><el-dropdown class="avatar-container" trigger="click"><div class="avatar-wrapper"><img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"><i class="el-icon-caret-bottom" /></div><el-dropdown-menu slot="dropdown" class="user-dropdown"><router-link to="/"><el-dropdown-item>Home</el-dropdown-item></router-link><a href="https://github.com/PanJiaChen/vue-admin-template/" target="_blank"><el-dropdown-item>Github</el-dropdown-item></a><a href="https://panjiachen.github.io/vue-element-admin-site/#/" target="_blank"><el-dropdown-item>Docs</el-dropdown-item></a><el-dropdown-item divided @click.native="logout"><span style="display:block;">Log Out</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div></div>
</template><script>
import { mapGetters } from 'vuex'
import AppLink from './Sidebar/Link'
import Hamburger from '@/components/Hamburger'
import { constantRoutes } from '@/router'
import variables from '@/styles/variables.scss'
import { isExternal } from '@/utils/validate'
export default {name: 'Topbar',components: {AppLink,Hamburger},data() {return {routes: constantRoutes}},computed: {activeMenu() {const route = this.$routeconst { meta, path } = route// if set path, the sidebar will highlight the path you setif (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},...mapGetters(['avatar'])},mounted() {this.initCurrentRoutes()},methods: {// 通过当前路径找到二级菜单对应项,存到store,用来渲染左侧菜单initCurrentRoutes() {const { path } = this.$routelet 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.redirectreturn path}// 如果有子项,默认跳转第一个子项路由let path = ''/*** item 路由子项* parent 路由父项*/const getDefaultPath = (item, parent) => {// 如果path是个外部链接(不建议),直接返回链接,存在个问题:如果是外部链接点击跳转后当前页内容还是上一个路由内容if (isExternal(item.path)) {path = item.pathreturn}// 第一次需要父项路由拼接,所以只是第一个传parentif (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// console.log('mei有错误的', key, this.routes)const route = this.routes.find(item => item.path === key)this.$store.commit('permission/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)}},async logout() {await this.$store.dispatch('user/logout')this.$router.push(`/login?redirect=${this.$route.fullPath}`)},toggleSideBar() {this.$store.dispatch('app/toggleSideBar')}}
}
</script><style scoped lang="scss">.hamburger-container {line-height: 56px;height: 100%;float: left;cursor: pointer;transition: background .3s;-webkit-tap-highlight-color:transparent;fill: #bfcbd9;&:hover {background: rgba(0, 0, 0, .025)}}
</style>