如何在Vue 2中更换路由时显示loading图标

Question

我一直在尝试在vue2中每次路由更改时显示一个旋转图标。 我在created方法中添加了一个标志以显示初始加载，并在一段时间后停止了加载旋转图标。但这根本不起作用。

是否有其他解决方案可以实现此目的？

提前感谢您的帮助。

- Hkm Sadek

---

你可以使用一个名为 data 的变量，例如 isLoading，并将其默认设置为 true。然后，在 mounted 函数中，当数据加载完成时，你可以加载你的内容并将变量设置为 false。在模板中，你可以添加一个旋转组件，它绑定到 isLoading。你不应该在每个路由更改时都显示旋转器，因为大多数情况下，没有要加载的数据的路由。当组件加载但数据仍然缺失时（路由应该是即时的），才显示旋转器。 - ssc-hrep3

谢谢您的好评.. :) - Hkm Sadek

Answer 1

您可以使用导航守卫来设置一个beforeEach方法，在进入每个新路由之前运行：https://router.vuejs.org/en/advanced/navigation-guards.html

- aprouja1

---

不幸的是，当在URL中最初使用路由（'someurl#/foo'）时，“beforeEach”不会被调用。此外，“beforeEnter”也无法访问“app”。有什么想法可以针对每个路由最初显示加载旋转器吗？ - schellmax