仅针对特定路径的Nuxt监视路由

我在我的应用程序中显示了一些图像。假设图像显示在domain.com/wallPaper路径上。 我使用FETCH()方法显示，并使用此代码查看query和params。

watch: {
  "$route.query": "$fetch"
},
async fetch() {
  console.log("fetched");
  //My Code
},

它在相同的路线上工作得很好。但是，当我转到主页或任何其他页面时，这个FETCH()也会被调用一次。 如何在更改到其他路由时停止调用此方法？

---

解决方案

此类代码应该可以完成此工作。

<template>
  <div>
    <button @click="$router.push({ name: 'wallpaper', query: { search: 'mountains' } })">
      look for mountains
    </button>
    <button @click="$router.push({ name: 'wallpaper', query: { search: 'nuxt' } })">
      look for nuxt
    </button>
    <button @click="$router.push({ name: 'index' })">
      Go back to the homepage
    </button>
  </div>
</template>

<script>
export default {
  watch: {
    async $route(to, from) {
      if (to.name !== 'wallpaper') return // if you're going to somewhere else than `wallpaper`
      // the `return` will end the execution and not go further

      console.log('fetch logic here in case you stay on the wallpaper route name')
      await this.fetch()
    },
  },
}
</script>

您还可以在更改查询时再次调用fetch()方法。