动态路由router

router中index代码

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

/*
  //当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
  hidden: true // (默认 false)

  //当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
  redirect: 'noRedirect'

  //当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
  //只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
  //若你想不管路由下面的 children 声明的个数都显示你的根路由
  //你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
  alwaysShow: true

  name: 'router-name' //设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
  meta: {
  roles: ['admin', 'editor'] //设置该路由进入的权限，支持多个权限叠加
  title: 'title' //设置该路由在侧边栏和面包屑中展示的名字
  icon: 'svg-name' //设置该路由的图标
  noCache: true //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示
  }

 */
import Layout from "@/layout";

export const asyncRoutes = [
  {
    name: "404页面",
    path: "*",
    redirect: "/404",
    hidden: true,
  },
  { path: "*", redirect: "/404", hidden: true },
];

export const constantRoutes = [
  {
    path: "/",
    component: Layout,
    redirect: "/productionProcess/operation/toDoCenter",
    children: [
      {
        path: "productionProcess/operation/toDoCenter",
        component: () => import("@/views/oparation/toDoManagement/toDoCenter/index"),
        name: "toDoCenter",
        meta: {
          title: "待办中心",
          affix: true,
          showMenu: false,
        },
      },
    ],
  },
  {
    path: "/login",
    component: () => import("@/views/login/index"),
    name: "Login",
    hidden: true,
  },

  {
    path: "/404",
    component: () => import("@/views/error-page/404"),
    hidden: true,
  },
];

const createRouter = () =>
  new VueRouter({
    scrollBehavior: () => ({
      y: 0,
    }),
    routes: constantRoutes,
  });

const router = createRouter();

export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;

permission获取动态路由

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth'
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条
import { isRelogin } from '@/utils/request'
import getPageTitle from '@/utils/get-page-title'  //修改title
NProgress.configure({ showSpinner: false }) // 进度条

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
  // 加载进度条
  NProgress.start()

  // 设置页面标题
  document.title = getPageTitle(to.meta.title)

  // 确定用户是否已登录
  const hasToken = getToken()
  // const hasToken = true  //不调用接口情况下使用,前端写死菜单跳转
  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登录，请重定向到主页
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          isRelogin.show = false
          store.dispatch('permission/GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login`)
      NProgress.done()
    }
  }
})
router.afterEach(() => {
  NProgress.done()
})