Vue 路由器重定向到 404 而不是登录页面 (Nuxt.js)

Question

我在带有 Vue 路由器的 Nuxt.js 项目中遇到了一个奇怪的行为：我正在尝试使用放置在 route.js 插件中的路由守卫，它在 nuxt.config.js 插件部分中注册，看起来像这：

  app.router.beforeEach((to, from, next) => {

    to.name !== "login" && app.store.getters["session/token"] === ""

      ? next({ name: "login" })

      : next();

  });

这个想法是，如果用户刷新页面，他会丢失存储在 Vuex 会话模块中的令牌，因此他应该被重定向到登录页面。

奇怪的行为是——路由守卫实际上工作，它重定向到 /login url，但它显示 404 页面——如果我再次刷新页面，它正确地重定向到 /login url/页面。

我也尝试过直接推送到登录页面app.router.push({ name: "login" })，但无济于事。

我所做的解决方法是在 404 页面中添加重定向：

  beforeCreate() {

    this.$router.push({ name: "login" });

  },

但我对此并不满意...

有谁知道发生了什么事？

Answer 1

前段时间，我在一个 Vue.JS 项目中创建了类似的行为。这是我的代码，也许它可以帮助您找到错误。// checks if user is authenticated before displaying the page// if not, reroutes to the login pagerouter.beforeEach((to, from, next) => {  if (to.matched.some(record => record.meta.requiresAuth)) {    if (store.getters.isAuthenticated) {      next();      return;    }    next('/login');  } else {    next();  }});元字段定义是否需要身份验证。在下面的代码片段中，您可以看到它是如何使用的。const routes = [  {    path: '/',    component: DashboardLayout,    redirect: '/login',    children: [      {        path: 'dashboard',        name: 'Dashboard',        component: Dashboard,        meta: {          requiresAuth: true,        },      }    ]  }];（希望括号是正确的）

Answer 2

在这一点上，我认为没有人有兴趣回答我的问题，所以我将只发布我所做的解决方法：在应用程序的 404 页面中，注释掉整个模板内容（因此，如果用户连接速度慢并被重定向到 404，他将看不到任何内容）。我还在之前创建的生命周期挂钩中添加了一个重定向：  beforeCreate() {       this.$router.push({ name: "login" });   },这样，用户会自动重定向到登录名而不会出现任何问题。