当前位置：首页 > VUE

vue简单实现动态路由

2026-02-25 05:40:13VUE

动态路由实现步骤

在Vue中实现动态路由通常涉及路由配置、动态加载组件以及权限控制等方面。以下是具体实现方法：

配置基础路由

在router/index.js中定义静态路由和动态路由的占位符。静态路由如登录页、404页等无需权限控制的路由。

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/404',
    component: () => import('@/views/404.vue')
  },
  // 动态路由将通过addRoute添加到这里
];

获取动态路由数据

通常从后端API获取用户权限对应的路由配置数据。假设返回的数据结构如下：

const asyncRoutes = [
  {
    path: '/dashboard',
    component: 'Dashboard',
    children: [
      { path: 'analysis', component: 'Analysis' }
    ]
  }
];

路由组件映射

创建组件名称与实际组件的映射关系，用于动态加载：

const componentMap = {
  Dashboard: () => import('@/views/Dashboard.vue'),
  Analysis: () => import('@/views/Analysis.vue')
};

格式化路由数据

将后端返回的路由数据转换为Vue Router可识别的格式：

function filterAsyncRoutes(routes) {
  return routes.map(route => {
    const item = {
      path: route.path,
      component: componentMap[route.component]
    };
    if (route.children) {
      item.children = filterAsyncRoutes(route.children);
    }
    return item;
  });
}

动态添加路由

在用户登录后或权限验证通过后，添加动态路由：

import router from '@/router';

const accessedRoutes = filterAsyncRoutes(asyncRoutes);
accessedRoutes.forEach(route => {
  router.addRoute(route);
});

// 添加404兜底路由
router.addRoute({ path: '/:pathMatch(.*)', redirect: '/404' });

路由守卫控制

在全局前置守卫中控制路由访问权限：

router.beforeEach((to, from, next) => {
  if (hasToken()) {
    if (to.path === '/login') {
      next('/');
    } else {
      if (!hasRoutes()) {
        // 获取并添加动态路由
        addDynamicRoutes().then(() => {
          next({ ...to, replace: true });
        });
      } else {
        next();
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next();
    } else {
      next('/login');
    }
  }
});

状态管理（可选）

使用Vuex或Pinia存储动态路由状态，避免重复获取：

// store/modules/permission.js
export default {
  state: {
    routes: []
  },
  mutations: {
    SET_ROUTES(state, routes) {
      state.routes = routes;
    }
  }
};