vue3 动态路由

阿丽塔~

于 2025-04-02 20:39:34 发布

阅读量748

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_44062823/article/details/146962908

版权

定义：对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由

1. 动态添加路由规则

场景

在应用初始化时，可能需要根据用户的角色或权限动态添加路由规则。

实现

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home }
  ]
});

// 动态添加路由
const addDynamicRoutes = () => {
  const AdminDashboard = () => import('./views/AdminDashboard.vue');
  const UserDashboard = () => import('./views/UserDashboard.vue');
  // 这是嵌套路由
  router.addRoute('admin', {
    path: '/admin/dashboard',
    component: AdminDashboard
  });

  router.addRoute('user', {
    path: '/user/dashboard',
    component: UserDashboard
  });
};

// 根据用户角色动态添加路由
const userRole = 'admin'; // 假设从后端获取用户角色
if (userRole === 'admin') {
  addDynamicRoutes();
}

export default router;

说明

使用 router.addRoute() 方法可以动态添加路由规则。
addRoute() 的第一个参数是父路由的名称（可选），第二个参数是路由对象。

2. 动态路由匹配

场景

根据 URL 参数动态加载不同的组件。

实现

import Vue from 'vue';
import VueRouter from 'vue-router';
import User from './views/User.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/user/:id', component: User }
  ]
});

export default router;

在 User 组件中，可以通过 useRoute params 访问动态参数：

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(() => route.params.id, (newId, oldId) => {
  // 对路由变化做出响应...
})
</script>

说明

动态路由参数使用 :paramName 的形式定义。
在组件中可以通过 useRoute params 访问动态参数。
使用 watch 监听 route.params 的变化，以响应 URL 参数的改变。

3. 懒加载动态路由

场景

根据用户的行为或权限动态加载路由对应的组件，以优化应用的性能。

实现

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home }
  ]
});

// 动态添加懒加载路由
const addLazyRoutes = () => {
  const AdminDashboard = () => import('./views/AdminDashboard.vue');
  const UserDashboard = () => import('./views/UserDashboard.vue');

  router.addRoute('admin', {
    path: '/admin/dashboard',
    component: AdminDashboard
  });

  router.addRoute('user', {
    path: '/user/dashboard',
    component: UserDashboard
  });
};

// 根据用户角色动态添加懒加载路由
const userRole = 'admin'; // 假设从后端获取用户角色
if (userRole === 'admin') {
  addLazyRoutes();
}

export default router;

说明

使用 import() 语法实现路由组件的懒加载。
动态路由的懒加载可以减少应用初始加载时间，按需加载资源。

4. 动态路由的权限控制

场景

根据用户的权限动态加载路由，并限制访问。

实现

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import AdminDashboard from './views/AdminDashboard.vue';
import UserDashboard from './views/UserDashboard.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home }
  ]
});

// 动态添加路由并设置权限
const addRoutesWithPermissions = (userRole) => {
  const routes = [];

  if (userRole === 'admin') {
    routes.push({
      path: '/admin/dashboard',
      component: AdminDashboard,
      meta: { requiresAuth: true, role: 'admin' }
    });
  } else if (userRole === 'user') {
    routes.push({
      path: '/user/dashboard',
      component: UserDashboard,
      meta: { requiresAuth: true, role: 'user' }
    });
  }

  routes.forEach(route => router.addRoute(route));
};

// 根据用户角色动态添加路由
const userRole = 'admin'; // 假设从后端获取用户角色
addRoutesWithPermissions(userRole);

// 路由守卫，检查权限
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const userRole = 'admin'; // 假设从后端获取用户角色

  if (requiresAuth) {
    const allowedRoles = to.matched.map(record => record.meta.role);
    if (allowedRoles.includes(userRole)) {
      next();
    } else {
      next('/unauthorized');
    }
  } else {
    next();
  }
});

export default router;