Question

当我在所有ajax调用的路由之间导航时，我想使用nuxt中显示的加载指示符。

我可以以某种方式触发指示器显示吗？

Answer 1

methods: {
  async onSubmit() {
    try {
      this.$root.$loading.start();
      const result = await someAsyncMethod();
    } catch (err) { 
      // this.$toast.error(err.message);
    } finally { 
      this.$root.$loading.finish(); 
    }
},

这可能是使用默认加载指示符的典型异步方法。

Answer 2

在新版本中，就是这个。$ nuxt.loading.start（）

methods: {
  search() {
    this.$nuxt.$loading.start() //STARTS LOADING
    this.$axios
      .get('/api/product', {
        params: {
          query: this.query
        }
      })
      .then((response) => {
        this.$nuxt.$loading.finish() //STOPS LOADING
        this.results = response.data
      })
      .catch((err) => {
        this.$store.commit('snackbar/add', err.response.data)
    })
  }
}

注意

如果您将dark设置为false，则进度条将以白色和白色背景显示，将不可见。记得在nuxt.config.js中更改进度的颜色

nuxt我可以手动显示加载指示器吗？

2 个答案: