关于vue-admin动态生成侧边栏问题

router文件的修改

• 1，删除文件中原有路径 保留一个路劲变量
  同时添加两个这样的文件
  其中development.js文件加入
  module.exports = file => require(’@/views/’ + file + ‘.vue’).default
  在_import_production.js文件加入
  module.exports = file => () => import(’@/views/’ + file + ‘.vue’)
  2，在src文件中添加promission.js文件并在main.js引用
  promission.js 内容如下
  import router from ‘./router’
  // import { Message } from ‘element-ui’
  import axios from ‘axios’
  const _import = require(’./router/import’ + process.env.NODE_ENV)//获取组件的方法
  import Layout from ‘./views/layout/Layout’ //Layout 是架构组件，不在后台返回，在文件里单独引入
  import store from ‘./store/index’
  import Cookies from ‘js-cookie’
  var getRouter//用来获取后台拿到的路由
  //默认文件路径如下用于页面刚开始加载
  //component指向文件是不加斜杠
  //不指向文件直接写’layout’字符串 filterAsyncRouter 方法会处理为import形式

  const constantRouterMap1 = [
  { path: ‘/login’, component: ‘login/index’, hidden: true },
  { path: ‘/404’, component: ‘404’, hidden: true },
  { path: ‘/declare’,
  component: ‘declare/declare’,
  hidden: true,
  },
  { path: ‘/index’,
  component: ‘Layout’,
  redirect: ‘/index/index’,
  // name: ‘Index’,
  meta: { title: ‘首页’, icon: ‘example’ },
  children: [
  {
  path: ‘index’,
  name: ‘Index’,
  component: ‘index/indexs’,
  meta: { title: ‘首页’, icon: ‘table’ }
  }
  ]
  },
  { path: ‘*’, redirect: ‘/login’, hidden: true }
  ]

   router.beforeEach((to, from, next) => {
   	//cookie中保存的是否登录判断是不是第一次获取动态路径
   	  const a = Cookies.get('isLogin')
   	  if (Cookies.get('headerUrls')) {
   	    if (!getRouter) {
   	      getRouter = getObjArr('router')//拿到路由
   	      routerGo(to, next)
   	    } else {
   	      if (getRouter.length == 4 || a == 'false') {
   	      //从服务器获取路劲
   	        axios({
   	          header: ({
   	            'Content-Type': 'application/x-www-form-urlencodeed'
   	          }),
   	          method: 'get',
   	          url: '/dept/menuTree',
   	        })
   	        .then((res) => {
   	          if (res.status === 200) {
   	            Cookies.set('isLogin', true)
   	            //防止浅拷贝引起的问题
   	            getRouter = [...JSON.parse(JSON.stringify(constantRouterMap3)), ...res.data]
   	            saveObjArr('router', getRouter)
   	            routerGo(to, next)
   	          }
   	        })
   	        .catch((err) => {
   	          console.log(err)
   	        })
   	      } else {
   	        next()
   	      }
   	    }
   	  } else {
   	    if (!getRouter) {
   	    //如果有本地路径直接跳页
   	      getRouter = constantRouterMap1
   	      routerGo(to, next)
   	    } else {
   	     //如果有本地路径直接跳页
   	      next()
   	    }
   	  }
   	})
   	
   	
   	function routerGo(to, next) {
   	    getRouter = filterAsyncRouter(getRouter) //过滤路由
   	    router.addRoutes(getRouter) //动态添加路由
   	    global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作
   	    // next()
   	    // if (!isLogin) {
   	      next({ ...to, replace: true })
   	    // }
   	}
   	
   	function saveObjArr(name, data) { //localStorage 存储数组对象的方法
   	  localStorage.setItem(name, JSON.stringify(data))
   	}
   	
   	function getObjArr(name) { //localStorage 获取数组对象的方法
   	  return JSON.parse(window.localStorage.getItem(name));
   	
   	}
   	
   	function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串，转换为组件对象
   	  const accessedRouters = asyncRouterMap.filter(route => {
   	    if (route.component) {
   	      if (route.component === 'Layout') {//Layout组件特殊处理
   	        route.component = Layout
   	      } else {
   	        route.component = _import(route.component)
   	      }
   	    }
   	    if (route.children && route.children.length) {
   	      route.children = filterAsyncRouter(route.children)
   	    }
   	    return true
   	  })
   	  return accessedRouters
   	}