【问题】

做项目过程中遇到如下问题：

使用this.$router.push({path: ‘xxxx’, query: {id: “1”}})跳转到“xxxx”页面时，发现跳转成功且地址栏显示id=1，但是在该页面的mounted方法里却拿不到this. $route.query.id的值。

【解决】

发现该页面在app.vue文件中被 < keep-alive>所包裹。查询API得知：

vue2：

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。

vue2 官方文档：keep-alive

vue3：

当一个组件在 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 的直接子节点及其所有子孙节点。

vue3 官方文档：keep-alive

所以:

将 mounted 或者 onMounted 改为 activated 或者 onActivated 即可。