vue 动态路由实现原理

Vue 动态路由实现原理是通过路由参数来实现的。在 Vue Router 中，可以通过在路由路径中定义占位符来传递参数，例如：

{
  path: '/user/:id',
  component: User
}

在这个例子中，`:id` 表示一个占位符，可以匹配任何非 / 的字符。当用户访问 `/user/123` 时，这个路由就会匹配到，同时 `123` 会作为参数传递给 `User` 组件。

在组件中，可以通过 `$route.params` 访问路由参数。例如，在 `User` 组件中可以这样获取 `id` 参数：

export default {
  mounted() {
    const userId = this.$route.params.id
    // ...
  }
}

通过这种方式，就可以实现动态路由。同时，Vue Router 还提供了一些辅助函数，例如 `$router.push` 和 `$router.replace`，用于在代码中动态跳转路由。