vue 动态路由的 渲染

该博客详细介绍了如何在Vue.js应用中实现路由权限拦截,通过 vuex 进行状态管理,动态生成及设置路由,确保只有授权用户才能访问特定菜单和页面。主要涉及Vuex模块的使用、路由拦截器的配置以及动态路由的生成过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

permission.js 配置路由拦截 router.beforeEach

// 登陆的时候获取菜单列表
let {  menuList  } = await store.dispatch('user/getInfo') 
 // 去 vuex 里面处理 菜单列表
const getRoutesList = await store.dispatch('permission/getRoutesList', menuList  )
// 合并静态路由和动态路由 把404 页面最后添加进去
let routerList = [...router.options.routes, ...getRoutesList, {
            path: '*',
            redirect: '/404',
            hidden: true
          }]
 // 重新渲染 路由菜单 (不写渲染不出来菜单) 
router.options.routes = routerList;
router.addRoutes(routerList)
          next({
            ...to,
            replace: true
          })

vuex 中配置 路由菜单列表处理

import Layout from '@/layout'

export const filterRouter = (menusList) => {
  const menus = []
  menusList.map(item => {
    var obj = {}
    if (item.parentId === 0) {
      obj = {
        path: item.url,
        component: Layout,
        parentId: item.parentId,
        menuId: item.menuId,
        redirect: item.redirectUrl,
        hidden: item.hidden == 1 ? false : true,
        meta: {
          title: item.displayName,
          icon: item.icon
        },
      }
    } else {
      obj = {
        path: item.url,
        parentId: item.parentId,
        menuId: item.menuId,
        component: (resolve) => require([`@/views${item.url}`], resolve),
        redirect: item.redirectUrl,
        hidden: item.hidden == 1 ? false : true,
        meta: {
          title: item.displayName,
          icon: item.icon
        },
      }
    }
    menus.push(obj)
  })
  const map = {}
  menus.forEach(item => {
    map[item.menuId] = item
  })
  const tree = []
  menus.map(item => {
    const pid = item.parentId
    if (pid === 0) {
      tree.push(item)
    } else {
      const parent = map[pid]
      if (!parent.children) {
        parent.children = [item]
      } else {
        parent.children.push(item)
      }
    }
  })
  return tree
}
const state = {
  accesseRoutes: [],
};
const getters = {};
const mutations = {
  SET_ACCESS_ROUTES: (state, routes) => {
    state["accesseRoutes"] = routes;
  },
};
const actions = {
  async generateRoutes({
    commit
  }, menus) {
    const accessedRoutes = await filterRouter(menus)
    commit("SET_ACCESS_ROUTES", accessedRoutes);
    return accessedRoutes
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值