vue根据后端菜单自动生成路由（动态路由）

vue根据后端菜单自动生成路由(动态路由)

router.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import generateRouter from './generateRouter'
import cookie from './cookie.js'
Vue.use(Router)
let router = new Router()
const getRouter = () => {
  router.matcher = new Router().matcher//重置路由
  router = generateRouter(router)
}

// 在菜单改变时调用重新生成菜单
getRouter()

// 全局守卫  控制用户未登录状况下的加载
router.beforeEach(async (to, from, next) => {
  if (to.name) { //路由正确
    if (to.matched.some(res => res.meta.requireLogin)) { //需要登录
      // 判断是否需要登录权限
      if (['true', true].indexOf(cookie.getCookie('isLogin')) > -1) {
        //判断是否有用户信息
        !sessionStorage.getItem('userInfo') && (await store.dispatch('getUserInfo'))
        //判断是否有权限树信息
        !localStorage.getItem('menuList') && (await store.dispatch('getMenuListByUser'))

        // next()
      } else {
        next({
          name: 'loginLink1'
        })
      }
    } else {
      next()
    }
  } else { //路由错误
    if (['true', true].indexOf(cookie.getCookie('isLogin')) > -1) { //已经登录
      next({
        name: 'navigationLink'
      })
    } else {
      next({
        name: 'loginLink1'
      })
    }
  }
})
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export { router, getRouter }

生成菜单generateRouter.js

// import router from './index'
// import Router from 'vue-router'
// const router = new Router()
const routes = [
  {
    path: '/',
    name: 'indexLink1',
    component: resolve => require(['@/view/index.vue'], resolve),
    redirect: '/navigation',
    meta: {
      title: '首页',
      requireLogin: true
    },
    children: []
  },
  {
    path: '/navigation',
    name: 'navigationLink',
    component: resolve => require(['@/view/navigation/index.vue'], resolve),
    meta: {
      title:'导航页',
      requireLogin: true
    }
  },
  {
    path: '/login',
    name: 'loginLink1',
    component: resolve => require(['@/view/login/login.vue'], resolve),
    meta: {
      requireLogin: false
    }
  },
  {
    path: '/404',
    name: 'unfoundLink',
    component: resolve => require(['@/view/404.vue'], resolve),
    meta: {
      requireLogin: true
    }
  },
  {
    path: '/401',
    name: 'unPermissionLink',
    component: resolve => require(['@/view/401.vue'], resolve),
    meta: {
      requireLogin: true
    }
  }
]
const generateRouter = (router) => {
  routes[0].children = []
  const menuList = JSON.parse(localStorage.getItem('menuList'))
  function getAllLeaf(data) {
    const result = []
    function getLeaf(data) {
      data.forEach(item => {
        if (!item.hasChild) {
          result.push(item)
        } else {
          getLeaf(item.children)
        }
      })
    }
    getLeaf(data)
    return result
  }

  if (menuList && menuList.length !== 0) {
    const menuLeafList = getAllLeaf(menuList)
    menuLeafList.forEach(item => {
      if (item.url) {
        routes[0].children.push({
          path: item.url,
          name: `${item.url.split('/').join('')}Link`,
          component: (resolve) => require(['@/view' + item.url + '.vue'], resolve),
          meta: {
            requireLogin: true
          }
        })
      }
    })
  }

  router.options.routes = []
  routes.forEach(item => {
    router.addRoute(item)
    router.options.routes.push(item)
  })
  return router
}

export default generateRouter

cookie.js

const cookie = {
  /**
   * 设置cookie
   * @param cname 名称
   * @param cvalue 值
   * @param exhours 过期时间(单位：小时)
   */
  setCookie(cname, cvalue, exhours = 0) {
    let expires = ''
    if (exhours) {
      const d = new Date();
      d.setTime(d.getTime() + (exhours * 60 * 60 * 1000));
      expires = "expires=" + d.toGMTString();
    }
    document.cookie = cname + "=" + cvalue + "; " + expires;
  },
  /**
   * 获取cookie
   * @param cname 名称
   * @return {string}
   */
  getCookie(cname) {
    const name = cname + "=";
    const ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      const c = ca[i].trim();
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }
}

export default cookie