Nuxt如何仅对特定路径开启路由监听 避免其他页面触发fetch方法

问题原因 #

路由切换过程中，wallpaper 组件的销毁时机晚于 $route.query 更新时机。路由从 wallpaper 页切走时，query 会先发生变化触发 watch 回调，此时组件还未销毁，所以 fetch 会被额外执行一次。

解决方案 #

方案1：在fetch方法内增加路由校验

改造成本最低，直接在fetch逻辑最前面增加路由判断，非wallpaper路由直接终止执行：

watch: {
  "$route.query": "$fetch"
},
async fetch() {
  // 新增路由判断，路由不匹配直接返回，也可以用路由名称判断：if (this.$route.name !== 'wallpaper') return
  if (this.$route.path !== '/wallpaper') return
  console.log("fetched");
  // My Code
},

方案2：修改watch逻辑，仅匹配当前路由时触发

如果不想修改原有fetch逻辑，可以改写watch的回调，触发前先校验路由：

watch: {
  "$route.query": {
    handler() {
      if (this.$route.path === '/wallpaper') {
        this.$fetch()
      }
    },
    deep: true // 若query存在嵌套参数时需要加上，普通场景可省略
  }
},
async fetch() {
  console.log("fetched");
  // My Code
},

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