详解vue路由——动态路由

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

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

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

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

<template>
  <div>
    <p>详情页，ID为：{{ $route.params.id }}</p>
  </div>
</template>

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

<template>
  <div>
    <p>详情页，ID为：{{ id }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      id: ''
    }
  },
  watch: {
    '$route.params': {
      handler() {
        // $route.params 发生变化时，更新 id
        this.id = this.$route.params.id
      },
      immediate: true // 组件加载时也执行一次
    }
  }
}
</script>