详解vue路由——动态路由

在 Vue 中，使用动态路由可以使我们根据不同的参数渲染出不同的内容。动态路由可以实现类似于详情页、搜索页等常见的页面类型。

首先我们需要在路由配置文件中定义动态路由。定义方式是在路由路径中加入参数，如 /:id，其中 id 是参数名，表示这个路由路径可以匹配任何路径，例如 /123、/456 等等。

const routes = [
  {
    path: '/:id',
    component: () => import('@/views/Detail.vue')
  }
]

然后在组件中，我们可以通过 $route.params 来获取动态路由中传递的参数。例如，如果路由为 /123，我们可以通过 $route.params.id 获取到参数值 123。

需要注意的是，当路由从 /123 跳转到 /456 时，组件不会重新渲染，而是复用之前的组件实例，并更新 $route 对象。因此在组件中，如果需要根据 $route.params 的变化来更新页面内容，需要在 watch 中监听 $route 对象的变化。