在 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>
文章知识点与官方知识档案匹配，可进一步学习相关知识
