动态路由vue实现
动态路由在 Vue 中的实现
动态路由允许根据参数动态加载不同的组件或页面，常用于需要根据用户输入或后端数据动态生成路由的场景。以下是 Vue 2 和 Vue 3 中实现动态路由的方法。
基础动态路由配置
在 Vue Router 中，动态路由通过冒号 : 标记动态路径参数。例如，匹配用户 ID 的路由：
const routes = [
{
path: '/user/:id',
component: User,
props: true // 可选：将路由参数作为 props 传递
}
]参数会通过 $route.params.id 或组件的 props 访问。
响应路由参数变化
当路由参数变化但组件复用时（如从 /user/1 跳转到 /user/2），需要手动监听路由变化：
export default {
watch: {
'$route'(to, from) {
// 响应路由变化
this.fetchUser(to.params.id);
}
}
}动态路由匹配高级用法
-
多段动态参数
路径可包含多个动态参数：path: '/user/:username/post/:postId' -
可选参数
通过?标记可选参数：path: '/user/:username?' -
正则匹配
为参数指定正则约束：path: '/user/:id(\\d+)' // 仅匹配数字 ID
编程式导航与动态路由
通过 router.push 动态跳转：
// 字符串路径
router.push('/user/123');
// 对象形式
router.push({ path: '/user', query: { id: 123 } });动态添加路由（Vue Router 4）
在运行时通过 router.addRoute 动态添加路由：
router.addRoute({
path: '/new-route',
component: NewComponent
});路由懒加载与动态导入
结合动态 import() 实现懒加载，提升性能：
const routes = [
{
path: '/user/:id',
component: () => import('./views/User.vue')
}
];权限控制与动态路由
根据用户权限动态生成路由表：
// 假设从后端获取权限路由
const dynamicRoutes = fetchRoutesFromBackend();
dynamicRoutes.forEach(route => {
router.addRoute(route);
});注意事项
- 路由顺序：动态路由应放在静态路由之后，避免优先匹配。
- 404 处理：动态路由需配合通配符
*捕获未匹配路径。 - 导航守卫：使用
beforeEach守卫校验动态路由权限。
