Vue 开发中常见报错与处理

ゝ一世哀愁。 2023-01-01 13:48 362阅读 0赞

--------------------

# 1. “xxxx” is assigned a value but never used.eslintno-unused-vars #

错误原因：eslint的验证语法

解决办法：在错误语句后添加注释

// eslint-disable-line no-unused-vars

# 2. RangeError: Maximum call stack size exceeded #

在Vue 项目中，暴露路由对象之前，挂载了路由守卫（或称路由导航卫士），运行程序，点击 “退出” 按钮时，按照程序逻辑就清空了 `sessionStorage`中 保存的 `token` 值，但是，我发现页面没有被强制跳转到 `login` 登录页，此时控制台中报错如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]  
对于 “ RangeError: Maximum call stack size exceeded ” 这条错误信息，网上说是因为出现了死循环。

结合本项目，我认为是路由配置出了问题，或者跳转调用路由的时候出现死循环。

报错时的源代码：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../components/Login.vue'
    import Home from '../components/Home.vue'
    
    Vue.use(VueRouter)
    
    const router = new VueRouter({ 
        routes: [
            {  path: '/', redirect: '/login' },
            {  path: '/login', component: Login },
            {  path: '/home', component: Home }
        ]
    })
    
    // 暴露路由对象之前，先挂载路由守卫
    router.beforeEach((to, from, next) => { 
        if (to.push === '/login') return next()
        // 获取 token
        const tokenStr = window.sessionStorage.getItem('token')
        if (!tokenStr) return next('/login')
        next()
    })
    
    // 暴露路由对象
    export default router

查阅相关贴子，有老哥说， `next('/login')` 也会触发`beforEach`，尝试修改代码（`beforeEach`排除的页面）如下：

// 暴露路由对象之前，先挂载路由守卫
    router.beforeEach((to, from, next) => { 
        if (to.push === '/login') return next()
        // 获取 token
        const tokenStr = window.sessionStorage.getItem('token')
        const outPaths = ['/login']
        if (!tokenStr && !outPaths.includes(to.path)) return next('/login')
        next()
    })

然后，一保存运行，正常了，哈哈！终于可以睡个好觉了~

![在这里插入图片描述][20210110232901340.gif_pic_center]

|textbox|

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: /images/20221120/fa06d42680214b83abeab623f69971c6.png
[20210110232901340.gif_pic_center]: /images/20221120/d4397eb02db140c0a4799aada2235257.png