Vue Router 中监听子路由变化并触发 API 调用的正确实践

在 Vue 2 + Vue Router 3 中，需确保特定子路由（如 FoodDescription）每次被激活（含浏览器前进/后退）时都执行 API 请求，而非仅依赖按钮点击逻辑；推荐通过 $route 路由守卫式监听 + watch 实现精准、低侵入性响应。

在 Vue 2 + Vue Router 3 场景里，如果希望某个特定子路由（比如 `FoodDescription`）每次被激活时——包括浏览器前进、后退这类场景——都稳定触发 API 请求，就不能只把逻辑绑在按钮点击上；更合适的做法，是通过 `$route` 这种接近路由守卫的监听方式，再配合 `watch`，实现更精准、侵入性更低的响应。

要实现在任意方式（点击导航、URL 手动输入、浏览器前进/后退）进入某个 Vue Router 子路由时自动触发 store action 或 API 调用，核心原则是：将数据加载逻辑与路由状态绑定，而非与 UI 交互事件耦合。

问题的根子其实很明确：switchPage 里把 this.$router.push() 和 this.loadFoodByPage() 拆成了两步手动执行，这种写法只照顾到了“主动跳转”这一种情况。可一旦用户用的是浏览器原生导航，比如 popstate，组件里的任何方法都不会被触发，结果就是路由变了，状态却没跟上，前后自然对不上。

✅ 正确解法：利用 Vue 的响应式机制监听 $route 对象变化，在 watch 中判断目标路由名称，并提取参数（如 query.pageNumber）执行加载逻辑。

以下为完整、可直接集成的实现方案（适配你的 foodDescriptionComp 组件）：

export default {
name: 'FoodDescriptionComp',
props: {
viewMode: {
type: String,
required: true,
}
},
data() {
return {
catalogId: null // 假设从父组件或 store 获取
}
},
computed: {
// 安全读取 query 参数，避免 undefined
pageNumber() {
const num = parseInt(this.$route.query.pageNumber, 10)
return isNaN(num) ? 1 : num
}
},
watch: {
// 每次路由变更时触发（包括 history.back/forward）
'$route'(to, from) {
// 精准匹配子路由名称，避免误触发其他路由
if (to.name === 'FoodDescription') {
this.loadFoodByPage({
catalogId: this.catalogId,
pageNumber: this.pageNumber
})
}
}
},
methods: {
switchPage(pageNumber, foodIdForPageSelection) {
// ✅ 将页码存入 query，使 URL 可回溯、可分享、可被 watch 捕获
this.$router.push({
name: 'FoodDescription',
params: { foodId: foodIdForPageSelection },
query: { pageNumber } // 关键：用 query 传递分页状态
})
// ❌ 不再在此处调用 loadFoodByPage —— 交由 watch 统一处理
},
async loadFoodByPage({ catalogId, pageNumber }) {
try {
// 示例：调用 Vuex action（假设已映射）
await this.$store.dispatch('food/loadByPage', {
catalogId,
pageNumber
})
} catch (error) {
console.error('Failed to load food page:', error)
}
}
}
}

? 关键设计说明：

• 使用 query 而非 params 传分页参数：pageNumber 属于视图状态（非路由标识），应放在 query 中，保证其变化会触发 $route 更新，且不影响路由匹配逻辑；
• watch: '$route' 是黄金方案：它在每次路由完全切换后执行（to 已就绪），天然兼容所有导航方式（push、replace、back、forward、刷新），且无全局性能开销（只在本组件内监听）；
• 避免 beforeEach 全局守卫：正如你所顾虑，对数百路由做条件判断既低效又难维护；组件级 watch 更精准、更符合关注点分离原则；
• computed pageNumber 提供默认值和类型安全：防止 undefined 或非法字符串导致 API 请求失败。

⚠️ 注意事项：

• 若 catalogId 来自父组件，请确保其响应式（如通过 props 或 provide/inject 透传），否则 watch 中可能读取不到最新值；
• 首次进入页面时（如直接访问 /browse/food/123/description?pageNumber=5），watch 同样生效，无需额外 mounted 处理；
• 如需防抖重复加载（例如快速连点翻页），可在 watch 内添加节流逻辑或使用 lodash.throttle；
• 若 loadFoodByPage 是同步更新本地状态，建议加 v-if="$route.name === 'FoodDescription'" 到模板根元素，避免路由未匹配时渲染错误内容。

该方案彻底解耦导航行为与数据获取，真正实现“路由即状态”，是 Vue Router 应用中加载动态内容的推荐范式。