我正在使用Vue.js和vue路由器制作一个简单的应用程序。当我试图注销我的应用程序时,我收到了这个错误:
vue-router.esm.js?8c4f:2827 Uncaught (in promise) RangeError: Maximum call stack size exceeded
at RegExp.exec (<anonymous>)
at RegExp.[Symbol.match] (<anonymous>)
at String.match (<anonymous>)
at matchRoute (vue-router.esm.js?8c4f:1636)
at match (vue-router.esm.js?8c4f:1518)
at redirect (vue-router.esm.js?8c4f:1578)
at _createRoute (vue-router.esm.js?8c4f:1617)
at match (vue-router.esm.js?8c4f:1519)
at redirect (vue-router.esm.js?8c4f:1578)
at _createRoute (vue-router.esm.js?8c4f:1617)
replace @ vue-router.esm.js?8c4f:2827
logout @ App.vue?234e:64
click @ App.vue?4de4:34
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
3这是我的router.js:
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import auth from "./auth";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/dashboard",
name: "home",
component: Home,
beforeEnter: requireAuth
},
{
path: "/",
name: "login",
component: Login,
redirect: () => {
if (auth.loggedIn()) return "/dashboard";
else return "/";
}
},
{
path: "/users",
name: "users",
component: () => import("./views/Users.vue"),
beforeEnter: requireAuth
},
{
path: "/plans",
name: "plans",
component: () => import("./views/Plans.vue"),
beforeEnter: requireAuth
},
{
path: "/meetups",
name: "meetups",
component: () => import("./views/Meetups.vue"),
beforeEnter: requireAuth
},
{
path: "/notif",
name: "notifications",
component: () => import("./views/Notifications.vue"),
beforeEnter: requireAuth
},
{
path: "/admins",
name: "admins",
component: () => import("./views/Admins.vue"),
beforeEnter: requireAuth
},
{
path: "/about",
name: "about",
component: () => import("./views/About.vue"),
beforeEnter: requireAuth
}
]
});
function requireAuth(to, from, next) {
if (!auth.loggedIn()) {
next({
path: "/login",
query: { redirect: to.fullPath }
});
} else {
next();
}
}这是我的注销功能:
logout() {
auth.logout();
this.$router.replace("/");
}该应用程序是一个简单的仪表板,用于显示一些统计数据。我用的是火基蚀刻。它以前起作用了,我不知道我做了什么来破坏它,请帮助!Update --当使用错误中建议的代码时,我得到另一个错误,不确定这个错误是关于什么的:
TypeError: Cannot read property 'name' of null
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3092cd10-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90& (app.js:1116), <anonymous>:30:55)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at new Watcher (vue.runtime.esm.js?2b0e:4468)
at mountComponent (vue.runtime.esm.js?2b0e:4073)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5978)
at createElm (vue.runtime.esm.js?2b0e:5925)发布于 2020-05-27 15:44:47
这是因为当您注销时,auth.loggedIn()将返回false。
因此,在登录路由的redirect属性中,else部件执行。然后重定向到登录页面,然后一次又一次地执行redirect。在无限循环中,您将重定向到登录页面。
如果要重定向到登录页面,则必须检查而不是运行重定向功能。您可以像其他路由一样使用beforeEnter:
function checkLogin(to, from, next) {
if (auth.loggedIn()) {
next({
path: "/dashboard",
});
} else {
next();
}
}在线路阵列中:
routes: [
...
{
path: "/",
name: "login",
component: Login,
beforeEnter: checkLogin
},
...
]https://stackoverflow.com/questions/62046821
复制相似问题