爱站程序员基地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.titlelet user = localStorage.getItem(\'user\')if (to.path === \'/login\' || to.path === \'/register\') {next()} else {user ? next() : next(\'/login\')}})export default router
