vue 动态路由的渲染_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,
};