(There is too much code, so I only selected some key codes and posted them)
Generally, the backend management system needs to display different menus according to different identities.
1) Or add menu information in data.json
2) After successful login, you will be redirected according to your route. You must define the components loaded by the route in src/router/index in advance.
import Vue from 'vue'
import Router from "vue-router";
Vue.use(Router);
import Login from "@/views/Login/login"
import Layout from "@/layout"
import Home from "@/views/Home/index"
const routes = [
//匹配空路由跳转到登录页
{
path: '/',
redirect: "/login",//重定向
},
//登录
{
path: '/login',
name: 'login',
component: Login,
},
//首页
{
path: '/layout',
name: 'layout',
component: Layout,
children: [
{
path: 'home',
name: '首页',
component: Home,
},
{
path: 'home/message',
name: "消息",
component: () => import("@/views/Home/message"),
},
{
path: 'home/notice',
name: '公告',
component: () => import("@/views/Home/notice"),
},
{
path: 'my',
name: '个人中心',
component: () => import("@/views/My/index"),
},
{
path: 'event',
name: '事件',
component: () => import("@/views/Event/index"),
},
{
path: 'report/systemReport',
name: "系统报表",
component: () => import("@/views/Report/page1"),
},
{
path: 'report/page2',
name: "二级菜单2",
component: () => import("@/views/Report/page2"),
},
{
path: 'gameWorld/qAndA',
name: "快问快答",
component: () => import("@/views/GameWorld/qAndA"),
},
{
path: 'gameWorld/greedySnake',
name: "贪吃蛇",
component: () => import("@/views/GameWorld/greedySnake"),
},
{
path: 'cp/cpInfoQuery',
name: "CP信息查询",
component: () => import("@/views/CP/cpInfoQuery"),
},
{
path: 'cp/infoManage',
name: "产品计费管理",
component: () => import("@/views/CP/infoManage"),
}
]
},
//报表
//404页面
{
path: "*",
name: "NotFound",
component: () => import("@/views/error/404.vue"),
}
]
const router = new Router({
mode: 'history',
routes
})
//路由守卫
router.beforeEach((to, from, next) => {
//用户信息
const userInfo = localStorage.getItem("userInfo");
//用户信息存在的情况下禁止跳向登录页
if (to.path === "/login" && userInfo) return next("/layout/my");
//如果用户访问登录页，直接放行
if (to.path === "/login" && !userInfo) return next();
//没有用户信息，强制跳转到登录页面
if (!userInfo) return next("/login");
next();//有用户信息，直接放行
})
export default routerDefine the module according to your own needs, and then write the routing exit on the page, which is where the components loaded by the routing are rendered.
Define the page in src/layout/index
<template>
<div v-loading="this.$store.state.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" style="overflow: hidden;">
<el-container class="container" style="position: fixed; z-index: 10; width: 100%; background: red;">
<el-header style="background: #409EFF; ">
<div class="header">
<span style="text-align: center; font-size: 14px; line-height: 26px;">
<span style="font-size: 16px; font-weight: 600; line-height: 34px;">移动高清电视</span>
<br />
内容运营管理平台
</span>
<div>
<el-dropdown style="line-height: 60px;">
<span>你好， {
{ this.userInfo ? this.userInfo.userName : "" }}<i
class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="logout"><span>退出登录</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
</el-container>
<el-container style="margin-top: 63px;">
<el-aside width="200px"
style="background-color: rgb(238, 241, 246) ; overflow: hidden ;position: fixed; height: 100%;">
<el-menu router :default-active="activeIndex">
<template v-for="item in menuList">
<el-menu-item v-if="!item.children" :key="item.index" :index="item.index" :name="item.name">
{
{ item.name }}
</el-menu-item>
<el-submenu v-else :key="item.index" :index="item.index" :name="item.name">
<template slot="title">{
{ item.name }}</template>
<template v-for="item2 in item.children">
<el-menu-item :key="item2.index" :index="item2.index" :name="item2.name">
{
{ item2.name }}
</el-menu-item>
</template>
</el-submenu>
</template>
</el-menu>
</el-aside>
<el-main style="padding-left: 220px ">
<el-tabs v-model="tabsName" closable @tab-remove="handleTabsRemove" @tab-click="handleTabsClick" type="card">
<el-tab-pane v-for="item in tabsList" :key="item.name" :name="item.path" >
<span slot="label">{
{ item.name }}</span>
</el-tab-pane>
</el-tabs>
<keep-alive include="MyIndex">
<router-view />
</keep-alive>
</el-main>
</el-container>
<el-dialog title="修改密码" :visible.sync="editPassState" width="50%">
<el-form v-loading="editFormLoading" :model="editPassForm" label-width="80px" ref="editPassForm"
:rules="rules.editPassFormRules">
<el-form-item class="flex" label="原密码" prop="oldPass">
<el-input clearable v-model="editPassForm.oldPass" type="password" placeholder="请输入原密码"></el-input>
</el-form-item>
<el-form-item class="flex" label="新密码" prop="newPass">
<el-input clearable v-model="editPassForm.newPass" type="password" placeholder="请输入新密码"></el-input>
</el-form-item>
<el-form-item class="flex" label="确认密码" prop="confirmPass">
<el-input clearable v-model="editPassForm.confirmPass" type="password" placeholder="确认新密码"></el-input>
</el-form-item>
<span style="display: flex; justify-content: space-around;">
<el-button @click="cancelEditForm">取消</el-button>
<el-button type="primary" @click="submitEditForm(editPassForm)">确定</el-button>
</span>
</el-form>
</el-dialog>
</div>
</template>
The <router-view /> tag is used to switch routes and load different components.
This piece of code is the routing menu on the left. Of course, you need to make an interface request in advance.
Now define the interface in the server
Page request interface
Page effect:
Click on different menus to switch routes
//路由监听事件
openTabs(e) {
let tabsList = this.tabsList
if (!this.tabsList.some(item => item.fullPath == e.fullPath)) {
tabsList.push(e)
}
this.tabsName = e.path
this.tabsList = tabsList
},Add some other functions, switch routes, and use the top tag to save records.
//切换tab标签
handleTabsClick(e) {
this.$router.push({ path: this.tabsName })
this.activeIndex = this.$route.path
},
//删除标签栏
handleTabsRemove(e) {
// 只剩一个tab时不删除
if (this.tabsList.length == 1) return
//删除的是否是当前tab
let item = -1
if (e == this.tabsName) {
for (let index in this.tabsList) {
if (this.tabsList[index].path == e) {
item = index
}
}
}
const tabsList = this.tabsList.filter(item => {
return item.path !== e
})
//删除的tab是当前tab,并且不是最后一个
if (item !== -1 && e !== this.tabsList[this.tabsList.length - 1].path) {
this.tabsName = tabsList[item].path //切换tab
this.activeIndex = tabsList[item].path //menu菜单高亮
this.$router.push(tabsList[item].path) //路由跳转
}
//删除的tab是当前tab,并且是最后一个
if (item !== -1 && e == this.tabsList[this.tabsList.length - 1].path) {
this.tabsName = tabsList[tabsList.length - 1].path
this.activeIndex = tabsList[tabsList.length - 1].path
this.$router.push(tabsList[tabsList.length - 1].path)
}
this.tabsList = tabsList
},Page tag tag effect
