当前位置：首页 > VUE

vue 实现动态路由

2026-02-11 06:47:42VUE

实现动态路由的基本思路

动态路由的核心是根据用户权限或数据动态加载路由配置。Vue Router 提供 addRoute 方法，允许运行时添加路由规则。

静态路由与动态路由结合

定义基础路由（如登录页、404页），动态部分通过接口获取后注入。

const staticRoutes = [
  { path: '/login', component: Login },
  { path: '/404', component: NotFound }
];
const router = new VueRouter({ routes: staticRoutes });

获取动态路由数据

通过接口请求获取用户权限对应的路由配置，通常返回树形结构。需将数据转换为 Vue Router 支持的格式。

async function fetchRoutes() {
  const res = await axios.get('/api/user/routes');
  return res.data; // 示例: [{ path: '/dashboard', component: 'Dashboard' }]
}

路由数据转换

若后端返回组件路径字符串，需动态导入组件（需配合 Webpack 的 require.context 或 Vite 的 import.meta.glob）。

function loadComponent(componentName) {
  return () => import(`@/views/${componentName}.vue`);
}
const dynamicRoutes = fetchedRoutes.map(route => ({
  ...route,
  component: loadComponent(route.component)
}));

动态添加路由

使用 router.addRoute 注入转换后的路由。注意嵌套路由需递归处理。

dynamicRoutes.forEach(route => {
  router.addRoute(route);
});

路由守卫控制访问

在全局前置守卫中检查用户权限，未登录时跳转到登录页。

router.beforeEach(async (to, from, next) => {
  if (!isLogin() && to.path !== '/login') {
    next('/login');
  } else if (isLogin() && to.path === '/login') {
    next('/');
  } else {
    next();
  }
});

404路由处理

动态路由加载后，需确保 404 路由始终位于最后。

vue 实现动态路由

router.addRoute({ path: '*', redirect: '/404' });

完整示例代码

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/Login.vue';

Vue.use(VueRouter);

const staticRoutes = [
  { path: '/login', component: Login },
  { path: '/404', component: () => import('@/views/404.vue') }
];

const router = new VueRouter({ routes: staticRoutes });

export function setupRouter() {
  const userRoutes = await fetchUserRoutes();
  const dynamicRoutes = transformRoutes(userRoutes);
  dynamicRoutes.forEach(route => router.addRoute(route));
  router.addRoute({ path: '*', redirect: '/404' });
  return router;
}