vue-Maximum call stack size exceeded 报错怎么解决

Maximum call stack size exceeded (超过了最大调用堆栈大小)

如果你的Vue项目跟我上面的截图所报的错误是一致的情况下；那么您就可以参考一些我一些的解决办法；

分析

我们在报错信息的中可以看出错误文件是来自router；那么我们就在此文件中查看自己写的方法；如：

router.beforeEach((to, from, next) => {  
    if (to.path === "/login") {    
        next();  
    } else {    
        let token = localStorage.getItem("token");    
        if (token === null || token === "") {      
            next("/");    
        } else {
            next();    
        }  
    }  
    if (to.meta.title) {
        document.title = to.meta.title;  
    } else {
        document.title = "";  
    }
});

我们可以看到以上信息时在判断；是否在某个页面并且本地是否有token；然后进行跳转，那么我们就可以在其中去分别打印一下查看信息；如：

router.beforeEach((to, from, next) => {  
    if (to.path === "/login") {
        console.log(111);
        next();
    } else {
        let token = localStorage.getItem("token");
        if (token === null || token === "") {
            console.log(222);      
            next("/");
        } else {
          console.log(333);
          next();
        }  
    }  
    if (to.meta.title) {
        document.title = to.meta.title;  
    } else {    
    document.title = "";  
    }
});

分析结果

根据上面的打印信息，我们可以看到

说明在判断是否是token的时候反复执行了；导致内存崩溃；

问题

然后我查看到了本地信息和路由导航发现；next("/")跳转到的是首页，并且需要token的；所以一直在此循环，才导致超过了最大调用堆栈大小

结果

修改next("/login")即可解决啦！

router.beforeEach((to, from, next) => {  
    if (to.path === "/login") {    
        next();  
    } else { 
        let token = localStorage.getItem("token");   
        if (token === null || token === "") {     
            next("/login");  
        } else {      
            next();    
        }  
    } 
   if (to.meta.title) {
       document.title = to.meta.title;  
    } else {    
        document.title = "";  
    }
});

如果此方法帮助到了您；是我的万分荣幸！