Sha*_*der 5 splash-screen vue.js nuxt.js nuxtjs
我试图在路由之间添加一个如 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'
...
}
据我所知，您不能使用 Vue 组件作为 Nuxt 应用程序的加载指示器。
您必须创建一个 HTML 文档。此 HTML 文档不必有<html>,<head>或<body>。它只需是您想要显示的启动屏幕即可。
我是这样做的：
~/assets/loading.htmlnuxt.config.js文件中。loadingIndicator: {
name: '~/assets/loading.html'
}
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/模板/视图/加载