时间戳

首页 > 解决方案 > 使用 Nuxt 添加多个加载组件

vue.js - 使用 Nuxt 添加多个加载组件

问题描述

如何将几个加载组件添加到 nuxt 并将其命名为：

文档：https ://nuxtjs.org/docs/2.x/features/loading#using-a-custom-loading-component 。

有任何想法吗？

标签： vue.jsnuxt.js

解决方案

由于有一种方法可以将您自己的组件传递给加载组件

export default {
  loading: '~/components/LoadingBar.vue'
}

您可以使组件的样式动态化，比如说一个红色guests和一个蓝色，private并通过更改 vuex 状态在两者之间切换。

总结一下：

  • 你的组件有一些默认的红色
  • 你点击一些身份验证或类似的
  • 您进行 vuex 调用以更新状态，表明用户已通过身份验证
  • 让组件的样式对 vuex 的变化做出反应
  • 再次调用进度条
  • 查看更新的进度条样式已更改
  • 如果他注销，样式将再次恢复为红色

像这样：

<div :class="[store.isAuthenticated ? 'blue-color' : 'red-color']"></div>

推荐阅读