Vue - 在初始路由之前检查 localStorage（用于令牌）

Question

我有一个 Vue 应用程序，它对应用程序负载执行一些 localStorage 和服务器检查，以确定最初将用户路由到哪里。

这是在应用程序的主要入口组件中，在 created() 挂钩中

我的问题是默认/路由的组件首先明显加载，然后是服务器调用，一切都会导致用户路由到他们正确的位置

如何延迟初始组件的呈现，直到我的应用程序的主要组件 created() 方法完成，然后有目的地将用户导航到正确的路线？

Answer 1

编辑： 我刚刚看到您使用了 created 方法...如下所述，使用 beforeRouteEnter 代替 next() 参数它提供

首先，我不建议使用延迟，而是建议使用一个变量来跟踪 API 调用是否完成。您可以使用安装方法实现此目的：

data() {
  return {
    loaded: false,
  }
}
async mounted() {
  await yourAPICALL()
  if (checkIfTokenIsOkay) {
    return this.loaded = true;
  }
  // do something here when token is false
}

现在在您的 html 中仅在加载时显示它 true:

<div v-if="loaded">
  // html
</div>

更好的方法是使用 beforeRouteEnter 方法，它允许您甚至不加载页面而不是不显示它：https://router.vuejs.org/guide/advanced/navigation-guards.html

Answer 2

我以前遇到过这个问题，我坚信您必须拥有路由和路由器配置的初始文件。

在配置中，你可以在每条路由之前和 next() 处理权限和路由器。在路由器文件中，您可以设置参数并在 index.js 文件（路由器配置）

中检查它们

您还可以在 Router.beforeeach

中使用您的 localStorage 数据

Vue - 在初始路由之前检查 localStorage（用于令牌）

Vue - check localStorage before initial route (for token)

vue.js

vue-router