为什么我的Vue路由器会抛出最大调用堆栈错误？
女性
我有一个非常简单的路由，实际上看起来像这样，我在电子下使用它
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条件结束重定向到给定页面呢？
马特·乌
在Maximum call stack size exceeded通常是由于无限递归的，那肯定似乎这里是这样的。在router.beforeEach您要next转到的/register路线中，该路线又回到此方法中，该路线又调用next，依此类推。我看到你有requiresUser你的meta，所以你需要检查的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()
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么这会导致最大调用堆栈错误？
- 2
Angular ui路由器超出最大调用堆栈大小
- 3
反应路由器onEnter函数“未捕获的RangeError：超出最大调用堆栈大小”
- 4
“ RangeError：超出最大调用堆栈大小”为什么？
- 5
量角器/茉莉花测试抛出“ UnknownError：未知错误：超出最大调用堆栈大小”
- 6
“超出最大调用堆栈大小”错误
- 7
超出最大调用堆栈错误
- 8
将KnockoutJS导入要测试的ViewModel中时，为什么超过最大调用堆栈大小的Jest错误？
- 9
为什么Angular路由器会调用错误的组件和路由的ngOnInit？
- 10
为什么反应路由器会引发“无法获取/ example”错误？
- 11
在Vuex商店中使用Vue-Resource；获取最大调用堆栈大小错误
- 12
为什么我的路由器会拒绝转发给自己的数据包？
- 13
为什么在这种情况下超出了最大调用堆栈？
- 14
错误：“最大调用堆栈大小超出” AJAX调用WebMethod
- 15
jQuery单击触发器给出错误“超出最大调用堆栈大小”
- 16
jQuery单击触发器给出错误“超出最大调用堆栈大小”
- 17
为什么我的路由器没有路由？
- 18
铁路由器为什么会忽略waitOn？
- 19
为什么路由器的DNS设置会更改？
- 20
为什么下载Bittorrent时路由器会死机？
- 21
超出最大调用堆栈大小 - Vue.js
- 22
Vue Router Navigation Guard：超出最大调用堆栈大小？
- 23
如何捕获“超出最大调用堆栈大小”错误？
- 24
范围错误：超过了最大调用堆栈大小-JavaScript
- 25
jQuery错误-超出最大调用堆栈大小
- 26
在递归函数上遇到“最大调用堆栈”错误
- 27
Javascript Recussion 错误 - RangeError：超出最大调用堆栈大小
- 28
如何调试最大调用堆栈大小超出错误
- 29
为什么我的路由器通过DHCP分配了错误的地址
我来说两句