5

我试图在路由之间添加一个加载器，如 nuxt.js 文档中所示，但它不起作用。但我无法在应用程序启动之前添加启动画面。

我的components/loading.vue中的代码片段

<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start(){
      this.loading = true
    },
    finish(){
      this.loading = false
    }
  }
}
</script>

在nuxt.js.config

export default {
...

loading: '~/components/loading.vue'
...
}
4

1 回答 1

2

据我所知，您不能将 Vue 组件用作 Nuxt 应用程序的加载指示器。
您将不得不创建一个 HTML 文档。此 HTML 文档不必有<html>,<head>或<body>. 它必须是您想要显示的启动画面。

我是这样做的：

  1. 创建一个html文档~/assets/loading.html
  2. 将以下内容添加到nuxt.config.js文件中。
loadingIndicator: {
  name: '~/assets/loading.html'
}
  1. 保存并重新加载您的页面，您现在应该有一个自定义加载指示器/启动屏幕。

示例 HTML 文件：
这是一个非常简单的文件，用于在加载 nuxt 应用程序时显示初始屏幕图像。

<div style="height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #004066; margin-left: -8px; margin-top: -8px; overflow: hidden;">
  <img width="90%" src="<%= options.img %>">
</div>

注意：
注意<%= options.img %>. 我正在使用选项，可以nuxt.config.js简单地通过向 中添加更多键来定义loadingIndicator，下面可以看到一个示例。

loadingIndicator: {
  name: '~/assets/loading.html',
  img: '/loading.gif'
}

注意 2：
当访问加载指示器中的图像等资产时，您必须将它们放在/static文件夹中。

文档：https
://nuxtjs.org/docs/2.x/features/loading#custom-indicators 官方示例：https ://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/模板/视图/加载

于 2021-08-17T19:22:38.973 回答