vue动态路由记录

公司用vue2写了很多系统管理的项目，之前路由都是在前端写，这次尝试了一下动态路由的写法

动态路由介绍

动态路由就是利用router.addRoutes向路由里面动态添加页面，方便了权限的管理（防止用户直接输入路由名称进入页面），但也增加了维护难度

• 新增页面直接添加页面即可，后台配置好路径就行
• 权限控制方便，后端返回什么就只能展示什么，无需遍历路由限制权限
• 会增加代码难度，不了解的流程的会很难维护
• 前端配置路由随着项目规模越来越大，会导致路由目录越来越多，动态路由页面再多也是一个文件即可

实现

首先清楚页面的整体顺序

1. 访问页面是否登录
   • 未登录并且访问非login页面=》跳转login登录页面
   • 已登录跳转首页
2. 进入首页先判断是否获取路由，已经获取就进入相应页面，未获取就获取路由
3. 向后台获取到路由目录添加到路由后跳转指定页面

代码

先创建默认路由

const router = new Router({
  mode: 'history',
  routes: [{
    path: '*',
    component: (resolve) => {
      require(['@/views/404vue'], resolve)
    },
    name: '404',
    meta: {
      name: '404'
    }
  },
  {
    path: '/login',
    component: (resolve) => {
      require(['@/views/login/index.vue'], resolve)
    },
    name: 'login',
    meta: {
      name: '登录'
    },
    beforeEnter: (to, from, next) => {
      next()
    }
  }],
  scrollBehavior: () => ({
    y: 0
  }),
  isAddRoute: false //是否已经添加了路由
})

路由首位里面判断执行顺序

router.beforeEach((to, from, next) => {
  if(!islogin()&&to.name!="login") {
    //访问非登录页 并且 没登录
    next('/login')
    if(router.options.isAddRoute == true) {
      // 如果是从内页跳转到登录就刷新
      location.reload();
    }

    return;
  }
  if(to.name=="login"&&!islogin()) {
    // 访问是登录页 并且 没登录
    next()
    if(router.options.isAddRoute == true) {
      // 如果是从内页跳转到登录就刷新
      location.reload();
    }
    return;
  }

  if(router.options.isAddRoute) {
    next()
  }else{
    addRoute(to, from, next)
  }
})
function addRoute(to, from, next) {
//这里获取向后台请求获取数据
  $api.get("xxx").then(({data}) => {
  	//获取到后添加路由 具体的路由结构需要和后台沟通一下
    router.addRoutes(data)
    //添加好厚判断跳转地址
    if(to.name=="login") {
      // 如果是登录页 默认进去首页
      router.replace("/home")
      return;
    }
    router.replace(to.path)
    }
  })
}

踩坑

1. 如果出现无限跳转页面情况，那说明页面顺序执行的有问题，再慢慢排查
2. 跳转路由一定要用router.replace()，不可以用路由守卫里面的next()方法
3. 判断好登录页和非登录页的关系，已经登录状态直接进入首页，未登录页面只能访问login页面

提示

如果项目不是很大不推荐使用动态路由，感觉和前端配置路由区别并不是很大，维护的难度和调适的难度都有点大，不是非必要情况下可用可不用