动态路由vue实现
动态路由的概念
动态路由允许根据不同的参数（如ID、用户名等）动态生成路由路径，常用于需要根据数据变化展示不同内容的场景，例如用户详情页、商品详情页等。
基本配置方法
在Vue Router中，通过:标记动态参数。例如，定义一个动态用户路由：
const routes = [
{ path: '/user/:id', component: UserDetail }
]访问/user/123时，123会作为id参数传递给UserDetail组件。
获取动态参数
在组件中通过$route.params访问动态参数：
export default {
mounted() {
console.log(this.$route.params.id); // 输出如 '123'
}
}响应路由参数变化
当路由参数变化但组件复用时（如从/user/1跳转到/user/2），需要手动监听$route变化：
watch: {
'$route'(to, from) {
// 根据to.params.id重新加载数据
}
}高级匹配规则
可通过正则表达式限制参数格式。例如，限制id为数字：
{ path: '/user/:id(\\d+)', component: UserDetail }编程式导航
通过router.push动态跳转路由：
this.$router.push({ path: `/user/${userId}` });动态添加路由
使用router.addRoute动态添加路由，适用于权限控制场景：
router.addRoute({ path: '/admin', component: AdminPanel });注意事项
- 动态路由参数变化时，组件的生命周期钩子不会重新触发，需依赖
watch监听。 - 动态路由的匹配优先级低于静态路由，确保路由顺序合理。
通过上述方法，可以灵活实现动态路由功能，适应各类业务需求。
