vue动态路由详解


使用vue开发一些功能时,需要动态的判断是否有权限进入该路由,特别是一些后台系统,如果单一的只有几个角色的权限配置还好,如果是每个权限都需要配置,这个时候就需要使用到vue的动态路由了

一般的动态路由,有固定的权限的,可以在前端存储一份权限路由,可以移步 vue-element-admin,比较详细。

1.我们需要后端的配合,如果后端给的数据格式不合适,你需要做大量的操作来洗数据,数据格式可以按照这种
[
    {
        path: '/home',
        component: 'Layout',
        name: "首页",
        meta: {
            icon: 'home',
        },
        redirect: "/home/list",
        children: [
            {
                path: 'list',
                component: '/home/list',
                name: "列表",
                meta: {
                    icon: 'list',
                },
            }
        ]
    }
]


2.我们首先要在路由守卫 beforeEach 里判断是否已登录,如已登录再判断是否已经添加过路由,如未添加去调用获取路由列表的方法
// 判断是否已经添加过路由
let flag = false;
router.beforeEach(async (to, from, next) => {
  // 判断token是否存在的函数
  const hasToken = getToken();
  // token存在,已经登录
  if (hasToken) {
    // 判断路由是否已经保存了
    if (!flag) {
      // 未储存路由,调用方法向服务器获取路由
      await getUserRouters();
      flag = true;
      next({ ...to, replace: true })
    }
     if(to.path === '/login') {
      next({ path: '/' })
     } else {
      next();
     }
  } else {
    next(`/login?redirect=${to.path}`)
  }
})
3.获取路由列表方法
// 向服务器获取路由
const getUserRouters = () => {
  return new Promise((reslove, reject) => {
    // 请求路由的api
    getLoginUserPermission().then((res) => {
        // 拷贝路由数据
        const data = res.data.list
        if (!data.length) { // 路由为空就说明无权限
          Message({
            message: "当前账号暂无任何权限",
            duration: 5000,
            type: "warning"
          })
          reject()
          return
        }
        // 存储路由到vuex中
        store.dispatch('user/AddRouter', data);
        // 路由筛选函数
        const addRoute = formatRoutes(data)
        // 动态路由添加
        router.addRoutes(addRoute)
        //添加完动态路由再将404跳转添加
        router.addRoutes([{
          path: '*',
          redirect: '/404',
          hidden: true
        }])
        reslove()
      })
  })
}
4.遍历转换路由格式
// 遍历转换路由格式
function formatRoutes(menu) {
  const routers = [];
  menu.forEach(v => {
    const {
      component,
      children
    } = v;
    if (component) {
      if (component === "Layout") { // Layout 组件做特殊处理
        v.component = Layout;
      } else {
        v.component = (resole) => require([`@/views${component}`], resole)
      }
      if(children && children.length) {
        v.children = formatRoutes(children)
      }
      routers.push(v);
    }
  })
  // 返回已经洗好的数据
  return routers
}


文章到这里,动态路由就已经完成了

451

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - vue动态路由详解

评论
孙瑞杰生日