路由文件：分为静态路由和动态路由
登录成功，判断角色，addRoute添加动态路由，并且存储路由数组
根据路由数组生成菜单栏
直接获取路由this.$router.options.routes，但是addRoute添加的动态路由使用该方法获取不到，options里边没有
解决方法：在addRoute添加动态路由前，手动拼接静态和动态路由，赋值给options。this.$router.options.routes = [全路由数组]，但是页面手动刷新的时候还是会丢失动态添加的路由
在addRoutes添加动态路由前，将拼接路由存入vuex中，然后使用vuex中的路由生成菜单栏；
但是刷新的时候vuex会丢失路由，可以吧vuex存本地，每次刷新重新在vuex中获取路由
本次采用的方法二
动态添加的路由，刷新后点击跳转404页面，{path:’*’，redirect: ‘/404’…}不能放在静态路由里，否则刷新的时候即便获取到了异步路由数据也会直接跳转到404，解决方法应该将该路由放在动态路由里
采用方法二，登录后addRoutes异步添加的路由可以正常跳转。但是浏览器刷新之后会路由会丢失，页面跳转不过去，在router.beforeEach()方法中发现刷新时to.name为null。解决方法：在路由守卫里判断如果to.name==null,重新添加一遍路由
使用addRoutes报错Error: [vue-router] “path“ is required in a route configuration.因为这个api已经废弃，新的api是addRoute(参数为对象，而不是数组)，所以需要循环添加
import Vue from "vue" ;
import VueRouter from "vue-router" ;
import Layout from "@/layout/index" ;
import store from "../store/index" ;
Vue. use ( VueRouter) ;
export const constantRoutes = [
{
path: "/" ,
redirect: "/home" ,
component: Layout,
meta: {
title: "首页" ,
icon: "el-icon-s-home" ,
path: "/home" ,
} ,
children: [
{
path: "home" ,
name: "home" ,
component : ( ) => import ( "../views/Home" ) ,
} ,
] ,
} ,
{
path: "/device" ,
redirect: "/device/list" ,
component: Layout,
meta: {
title: "设备管理" ,
icon: "el-icon-mobile" ,
} ,
children: [
{
path: "list" ,
name: "diviceList" ,
component : ( ) => import ( "../views/device/list" ) ,
meta: {
title: "网关列表" ,
path: "/device/list" ,
} ,
} ,
{
path: "log" ,
name: "diviceLog" ,
component : ( ) => import ( "../views/device/log" ) ,
meta: {
title: "监控日志" ,
path: "/device/log" ,
} ,
} ,
{
path: "warn" ,
name: "diviceWarn" ,
component : ( ) => import ( "../views/device/warn" ) ,
meta: {
title: "预警设置" ,
path: "/device/warn" ,
} ,
} ,
] ,
} ,
{
path: "/login" ,
component : ( ) => import ( "../views/login/login" ) ,
hidden: true ,
} ,
{
path: "/404" ,
component : ( ) => import ( "../views/404" ) ,
hidden: true ,
} ,
] ;
export const asyncRoutes = [
{
path: "/user" ,
component: Layout,
meta: {
title: "用户管理" ,
icon: "el-icon-setting" ,
path: "/user/list" ,
} ,
children: [
{
path: "list" ,
name: "userList" ,
component : ( ) => import ( "../views/user/list" ) ,
} ,
] ,
} ,
{
path: "*" ,
redirect: "/404" ,
hidden: true ,
} ,
] ;
const router = new VueRouter ( {
routes: constantRoutes,
} ) ;
router. beforeEach ( ( to, from , next ) => {
if ( to. path == "/login" ) return next ( ) ;
const token = localStorage. getItem ( "token" ) ;
if ( ! token) return next ( "/login" ) ;
if ( ! to. name && store. state. userInfo. role == 0 ) {
asyncRoutes. forEach ( ( item ) => {
router. addRoute ( item) ;
} ) ;
next ( {
... to, replace: true } ) ;
} else {
next ( ) ;
}
} ) ;
export default router;
import Vue from "vue" ;
import Vuex from "vuex" ;
import {
constantRoutes, asyncRoutes } from "../router/index" ;
import router from "../router/index" ;
Vue. use ( Vuex) ;
export default new Vuex. Store ( {
state: {
open: true ,
userInfo: JSON . parse ( localStorage. getItem ( "userInfo" ) || "{}" ) ,
routes: localStorage. getItem ( "routes" )
? JSON . parse ( localStorage. getItem ( "routes" ) )
: constantRoutes,
} ,
mutations: {
changeOpen ( state, data ) {
state. open = data;
} ,
saveUserInfo ( state, data ) {
state. userInfo = data;
localStorage. setItem ( "token" , data. token) ;
localStorage. setItem ( "userInfo" , JSON . stringify ( data) ) ;
} ,
saveRoutes ( state ) {
if ( state. userInfo. role == 0 ) {
console. log ( asyncRoutes) ;
asyncRoutes. forEach ( ( item ) => {
router. addRoute ( item) ;
} ) ;
state. routes = constantRoutes. concat ( asyncRoutes) ;
} else {
state. routes = constantRoutes;
}
localStorage. setItem ( "routes" , JSON . stringify ( state. routes) ) ;
} ,
} ,
actions: {
} ,
modules: {
} ,
} ) ;
this . $axios
. post ( "/supportOldMan/sysUser/loginCheck" , {
userName: this . ruleForm. name,
passWord: this . ruleForm. pass,
} )
. then ( ( data ) => {
this . $store. commit ( "saveUserInfo" , data) ;
this . $store. commit ( "saveRoutes" ) ;
this . $message. success ( "登录成功" ) ;
setTimeout ( ( ) => {
this . $router. replace ( "/home" ) ;
} , 1000 ) ;
} ) ;