vue动态路由详解

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

2021-12-11 20:52:05

4116 热度

1372 浏览

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

1.我们需要后端的配合，如果后端给的数据格式不合适，你需要做大量的操作来洗数据，数据格式可以按照这种

json 复制代码

[
    {
        path: '/home',
        component: 'Layout',
        name: "首页",
        meta: {
            icon: 'home',
        },
        redirect: "/home/list",
        children: [
            {
                path: 'list',
                component: '/home/list',
                name: "列表",
                meta: {
                    icon: 'list',
                },
            }
        ]
    }
]

2.我们首先要在路由守卫 beforeEach 里判断是否已登录，如已登录再判断是否已经添加过路由，如未添加去调用获取路由列表的方法

javascript 复制代码

// 判断是否已经添加过路由
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.获取路由列表方法

javascript 复制代码

// 向服务器获取路由
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.遍历转换路由格式

javascript 复制代码

// 遍历转换路由格式
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
}

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

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

0/50

暂无评论，快来抢沙发吧~

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

评论 (0)