Nuxt 仅针对特定路径观察路线答案

【问题标题】：Nuxt watch route only for specific pathNuxt 仅针对特定路径观察路线
【发布时间】：2021-09-07 08:54:24
【问题描述】：

我正在我的应用程序中显示一些图像。假设图像显示在 domain.com/wallpaper 路由上。我正在使用 fetch() 方法进行展示，并使用此代码查看查询和参数。

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

它在同一条路线上运行良好。但是当我转到主页或任何其他页面时，这个 fetch() 也会被调用一次。如何在更改为另一条路线时停止调用此方法？

【问题讨论】：

所以你想在查询参数改变时只在特定路由上触发fetch，而不是在路由改变时触发？你把代码放在哪个文件里了？
壁纸页面中的@tho-masn
顺便说一句，最后一个 watch 运行，因为它的值已更改。我的回答（如下）主要是：检查下一条路径是什么，如果不是wallpaper，则不运行任何代码。

标签： vue.js nuxt.js

【解决方案1】：

这种代码应该可以完成这项工作。

<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() 方法。

【讨论】：

this.$fetch();将工作。顺便说一句，我正在从分页的 OnPageChange 方法中添加此代码。
@mukeshsoni 不确定OnPageChange 是什么。但很高兴它工作正常！
分页组件中，点击任意页码时，调用OnPageChange。

【解决方案2】：

您可以使用 nuxt 的 watchQuery 选项来仅查看查询更新。

Fetch 将在 any-query-param 查询参数更改后立即执行，但不会在路由更改时执行：

export default {
  watchQuery: ['any-query-param'],

  async fetch() {
    ...
  }
}

查看详情：https://nuxtjs.org/docs/2.x/components-glossary/pages-watchquery

【讨论】：

即使这个与问题有点相关，当你离开wallpaper路径时它不会被触发吗？
刚刚做了一个快速测试，其中fetch 在路由更改后没有被触发。不确定设置是否与问题中的设置相同。但即使它会被触发，如果watchQuery 用作函数（如文档中所述），也可以过滤掉这些情况。