Vue 开发中常见报错与处理
生活随笔
收集整理的這篇文章主要介紹了
Vue 开发中常见报错与处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. “xxxx” is assigned a value but never used.eslintno-unused-vars
錯誤原因:eslint的驗證語法
解決辦法:在錯誤語句后添加注釋
// eslint-disable-line no-unused-vars2. RangeError: Maximum call stack size exceeded
在Vue 項目中,暴露路由對象之前,掛載了路由守衛(或稱路由導航衛士),運行程序,點擊 “退出” 按鈕時,按照程序邏輯就清空了 sessionStorage中 保存的 token 值,但是,我發現頁面沒有被強制跳轉到 login 登錄頁,此時控制臺中報錯如下:
對于 “ 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()// 獲取 tokenconst 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()// 獲取 tokenconst tokenStr = window.sessionStorage.getItem('token')const outPaths = ['/login']if (!tokenStr && !outPaths.includes(to.path)) return next('/login')next() })然后,一保存運行,正常了,哈哈!終于可以睡個好覺了~
textbox|
總結
以上是生活随笔為你收集整理的Vue 开发中常见报错与处理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java swing图形界面开发设计器w
- 下一篇: 随手写个二分查找算法【Java】