vue router3.x 动态路由

Vue Router 3.x 支持动态路由，可以根据不同的参数值加载不同的页面。以下是一个简单的示例：

首先，在定义路由时，你可以使用动态占位符来表示参数。例如：

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

在上面的示例中，`/user/:id` 中的 `:id` 就是一个动态的参数。

然后，在组件中，你可以通过 `$route.params` 来获取动态参数的值。例如：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

当访问 `/user/123` 时，页面会加载 `User` 组件，并且 `{{ $route.params.id }}` 会被替换为 `123`。

你也可以通过监听 `$route` 对象的变化来触发相应的操作。例如：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  watch: {
    '$route' (to, from) {
      // 处理路由变化时的逻辑
    }
  }
}

这样当路由发生变化时，watch 函数就会被调用。

需要注意的是，动态路由的参数可以是任意字符串，但是如果要匹配 `/user/123` 和 `/user/abc` 这样的路径，你需要在路由定义时使用正则表达式来匹配特定的参数格式。

希望这个简单示例对你有帮助！如果有需要进一步了解的问题，请随时提问。