1、在组件中
<el-container>
<el-aside>
<el-row class="tac">
<el-col>
<el-menu :default-active="$route.meta.parentpath" //重点
class="menu"
background-color="#344055"
text-color="white"
router
>
<el-menu-item index="/home">
<i class="iconfont icon-dizhi"></i>
首页
</el-menu-item>
<el-menu-item index="/model">
<i class="iconfont icon-sikuaitubiao"></i>
已发布
</el-menu-item>
<el-menu-item index="/count">
<i class="iconfont icon-sikuaitubiao"></i>
统计
</el-menu-item>
<el-menu-item index="/publish">
<i class="iconfont icon-duihao"></i>
发表文章
</el-menu-item>
<el-menu-item index="/tabs">
<i class="iconfont icon-tags"></i>
标签页
</el-menu-item>
<el-menu-item index="/out">
<i class="iconfont icon-export"></i>
导出excel
</el-menu-item>
<el-menu-item index="/imageLoad">
<i class="iconfont icon-ic_image_upload"></i>
图片上传
</el-menu-item>
<el-menu-item index="/exit">
<i class="iconfont icon-tuichu"></i>
退出系统
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
2、在router中的index.js中 的导航路由中加入
meta: {
title: '首页',
parentpath: '/home'
}
3、具体如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout.vue'
// import { from } from 'core-js/fn/array'
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
const routes = [{
path: '/login',
name: 'login',
component: () =>
import ('../views/Login/login.vue'),
meta: {
title: '登录'
}
},
{
path: '/register',
name: 'register',
component: () =>
import ('../views/register/register.vue')
},
{
path: '',
component: Layout,
children: [{
path: '/home',
component: () =>
import ('../views/Home.vue'),
meta: {
title: '首页',
parentpath: '/home'
}
},
{
path: '/model', //为了高亮而存在的页面
name: 'model',
redirect: '/released',
component: () =>
import ('../views/released/model.vue'),
children: [{
path: '/released', //发布
name: 'released',
component: () =>
import ('../views/released/released.vue'),
meta: {
titie: '发布',
parentpath: '/model'
},
},
{
path: '/edit',
name: 'edit',
component: () =>
import ('../views/released/edit.vue'),
meta: {
titie: '编辑',
parentpath: '/model'
},
},
{
path: '/look',
name: 'look',
component: () =>
import ('../views/released/look.vue'),
meta: {
titie: '查看',
parentpath: '/model'
},
},
]
},
{
path: '/exit',
name: 'exit',
component: () =>
import ('../views/exit/exit.vue'),
meta: {
title: '退出',
parentpath: '/exit'
}
},
{
path: '/tabs',
name: 'tabs',
component: () =>
import ('../views/Tabs/tabs.vue'),
meta: {
title: '标签',
parentpath: '/tabs'
}
},
{
path: '/imageLoad',
name: 'imageLoad',
component: () =>
import ('../views/image/imageLoad.vue'),
meta: {
title: '图片上传',
parentpath: '/imageLoad'
}
}, {
path: '/publish',
name: 'publish',
component: () =>
import ('../views/publish/publish.vue'),
meta: {
title: '发表',
parentpath: '/publish'
}
},
{
path: '/out',
name: 'out',
component: () =>
import ('../views/out/out.vue'),
meta: {
title: '导出',
parentpath: '/out'
}
},
{
path: '/count',
name: 'count',
component: () =>
import ('../views/Count/count.vue'),
meta: {
title: '统计',
parentpath: '/count'
}
},
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title
let user = localStorage.getItem('user')
if (to.path === '/login' || to.path === '/register') {
next()
} else {
user ? next() : next('/login')
}
})
export default router
