动态路由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监听。
• 动态路由的匹配优先级低于静态路由，确保路由顺序合理。

通过上述方法，可以灵活实现动态路由功能，适应各类业务需求。