4. Vue Router4 动态路由-EW帮帮网

在 Vue Router 4 中，动态路由是一种非常强大的功能，它允许我们根据不同的 URL 参数来渲染不同的组件或者同一组件的不同状态。这对于创建用户个人页面或者具有大量内容的应用来说非常有用。

要创建一个动态路由，我们可以在路由的路径中添加一个冒号 :，后面跟上参数的名字。例如：

const routes = [
  { path: '/user/:id', component: User }
]

在这个例子中，:id 就是一个路由参数。当我们访问 /user/1 的时候，User 组件就会被渲染出来，并且 this.$route.params.id 的值会是 '1'。

Vue Router 4 提供了强大的动态路由匹配功能，可以让我们更灵活地处理路由参数。例如，我们可以使用正则表达式来限制路由参数的格式：

const routes = [
  { path: '/user/:id(\\d+)', component: User }
]

在这个例子中，:id(\\d+) 表示 id 参数必须是数字。当我们访问 /user/abc 的时候，由于 abc 不是数字，所以不会匹配到 User 组件。

在 Vue Router 4 中，我们可以通过多种方式来传递路由参数。最常见的方式是在 path 中定义参数，然后在 URL 中传递。但是，我们也可以在导航的时候，通过 params 选项来传递参数：

router.push({ name: 'user', params: { id: '123' }})

在这个例子中，我们通过 name 选项来指定要导航到的路由，然后通过 params 选项来传递参数。这种方式的好处是，我们可以在不改变 URL 的情况下，传递任意类型的参数。

在 Vue Router 4 中，路由参数是响应式的。也就是说，当我们在同一个路由内部改变参数的时候，对应的组件不会被重新创建，而是会复用。同时，组件内部可以通过 watch 来监听 $route 对象的变化，从而做出相应的动作。例如：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

在这个例子中，当我们从 /user/1 导航到 /user/2 的时候，User 组件会被复用，同时 $route 对象会发生变化，触发 watch 中的回调函数。

在使用动态路由的时候，有一些需要注意的地方：

当路由参数变化的时候，对应的组件会被复用，而不是重新创建。这意味着组件的生命周期钩子不会被调用。如果我们需要在参数变化的时候做一些操作，可以通过 watch 来监听 $route 对象的变化。
在导航到新的路由的时候，我们可以通过 replace 选项来控制是否在浏览器的历史记录中创建新的记录。例如，router.push({ path: '/user/1', replace: true }) 会导航到 /user/1，但是不会在历史记录中创建新的记录。

4. Vue Router4 动态路由