Vue2页面：URL参数判断应在mounted还是方法中执行？

一、实现位置：mounted + 路由监听（按需选择） #

• 如果只是首次进入页面时判断参数，直接在mounted()钩子中处理即可，因为mounted是页面挂载完成后执行，能稳定获取当前路由的参数。
• 如果页面是单页应用中可能被多次路由跳转进入（比如从其他路由带参数/不带参数跳转过来），仅靠mounted就不够了，需要添加watch监听$route的变化，每次路由更新时重新判断参数。

示例代码：

export default {
  data() {
    return {
      showSpecialMsg: false
    }
  },
  mounted() {
    this.checkUrlParam()
  },
  watch: {
    '$route': {
      immediate: true, // 首次加载也触发，可省去mounted里的重复调用
      handler() {
        this.checkUrlParam()
      }
    }
  },
  methods: {
    checkUrlParam() {
      // 写入参数判断逻辑
    }
  }
}

二、参数判断的正确写法 #

你原来的this.$route.query?.lookingforthis是错误的，问题出在两点：

1. URL里的参数键是_a，对应的值才是lookingforthis，所以应该取$route.query._a来做判断，而非lookingforthis
2. Vue2的部分环境可能不支持可选链（?.），稳妥写法可以先判断$route.query是否存在，再对比值

正确判断逻辑：

// 环境支持可选链时的简洁写法
this.showSpecialMsg = this.$route.query?._a === 'lookingforthis'

// 兼容低版本环境的写法
this.showSpecialMsg = this.$route.query && this.$route.query._a === 'lookingforthis'

内容的提问来源于stack exchange，提问作者Pianoc