如何在 Nuxt.js 中显示更改路由查询的加载指示器答案

【问题标题】：How to show loading indicator on change route query in Nuxt.js如何在 Nuxt.js 中显示更改路由查询的加载指示器
【发布时间】：2021-07-06 17:57:08
【问题描述】：

我有路线项目。例如，当我从链接 http://localhost:3000/product/kartiny/18142 转到链接 http://localhost:3000/product/frame/18142 时，我看到了这样的加载指示器：

但是当我只更改链接上的查询时，例如从 http://localhost:3000/catalog/kartiny?product=kartiny&sort_by=views_count&pages=3 到 http://localhost:3000/catalog/kartiny?product=kartiny&sort_by=views_count&pages=4 我看不到它

我如何强制显示它？

【问题讨论】：

您是使用axios 还是$axios 发送请求？
更改路径时，直接在浏览器中输入或使用nuxt-link?
@fevid 我正在使用 axios
@kissu 在第一种情况下是nuxt-link，在第二种情况下是this.$router.push({ query: q });

标签： vue.js nuxt.js

【解决方案1】：

如果您使用nuxt-link 或$router，您将没有任何类型的加载程序。
使用fetch() 或asyncData() 发出外部请求时会发生这种情况。
如果您正在更改路径，这不是 axios 调用，因此没有进度条。

你可以用这种代码手动触发进度条

<script>
export default {
  fetch() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      // eslint-disable-next-line nuxt/no-timing-in-fetch-data
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  },
}
</script>

不过，除了具有可视加载器之外，我不确定这是否有用。
这更像是一种类似于 YouTube 的行为，如果用户按下按钮并且他的连接速度较慢，则向用户显示页面正在加载。
Here is an example YouTube 所做的行为。

【讨论】：

【解决方案2】：

加载指示器适用于导航到其中包含 asyncData 或 fetch（呈现时）的页面。

由于您正在更改查询并使用methods 获取数据，因此您应该使用$axios 而不是axios，这将添加与请求导航相同的加载动画。

例如将axios.get 替换为this.$axios.$get。

【讨论】：