为什么我的 Vue 路由器会抛出最大调用堆栈错误？

Question

我有一个非常简单的路由实际上看起来像这样我在电子下使用它

 import Vue from "vue";
import VueRouter from "vue-router";
import Projects from "../views/Projects.vue";
import RegisterUser from "@/views/RegisterUser.vue";
//import { appHasOwner } from "@/services/";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "projects",
    component: Projects,
    meta: {
      requiresUser: true
    }
  },
  {
    path: "/register",
    name: "register",
    component: RegisterUser
  },
  {
    path: "/settings",
    name: "settings",
    meta: {
      requiresUser: true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Settings.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresUser === true)) {
    //this will be for test case undefined
    let user;
    if (typeof user === "undefined") {
      // eslint-disable-next-line no-console
      console.log(user); //logs undefined but at the end no redirect
      next("/register");
    } else {
      next();
    }
  }
});

export default router;

以文档为例

// GOOD
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})

只有当数据库中附加了一个用户时，应用程序才能启动，或者应该重定向到注册组件，但上面的代码将以Maximum call stack size exceeded结尾。那么如何检查beforeEach条件结束重定向到给定页面呢？

Answer 1

Maximum call stack size exceeded 通常是由于无限递归，这里肯定是这样。在router.beforeEach 中，您调用next 以转到/register 路由，该路由返回到此方法，该方法调用next，依此类推。我看到你的meta 中有一个requiresUser，所以你需要在beforeEach 中检查它，如下所示：

router.beforeEach((to, from, next) => {
  // If the route's meta.requiresUser is true, make sure we have a user, otherwise redirect to /register
  if (to.matched.some(route => route.meta.requiresUser === true)) {
    if (typeof user == "undefined") {
      next({ path: '/register' })
    } else {
      next()
    }
  }
  // Route doesn't require a user, so go ahead
  next()
}