zoukankan      html  css  js  c++  java
  • vue项目开发过程中遇到的问题

    前言

    从0 开始开发一个vue项目,旨在记录开发中遇到的问题

    1.全局安装Element UI

     https://element.eleme.cn/#/zh-CN/component/quickstart

    npm i element-ui -S

    main.js中

    import ElementUI from 'element-ui';

    import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(ElementUI);

    2.报错:

    报错原因:

      由于vue对语法的限制过于严格,所以第一次编译运行项目时会报错(如截图)

    解决方法:

    在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则

    2.beforeEach狗子,next('/login')跳转时,无限循环导致Maximum call stack size exceeded的问题

    代码如下:

     1 import router from './router'
     2 import { getToken } from '@/util/auth'
     3 
     4 router.beforeEach((to, from, next)=>{
     5     const hastoken = getToken('token')
     6  
     7     if(hastoken){
     8         if(to.path === '/login'){
     9            //token存在,并且要去的是登录页面 则重定向到首页(工作台)
    10            next({ path: '/index' })
    11         }else{
    12             //token存在,要去的是登录页面以外的--访问的是其他路由
    13             next()
    14         }
    15     }else{
    16         //没有token 跳转到登录页
    17         next('/login')
    18     }
    19 })

    这段代码,咋一看符合逻辑,没有问题,但是忽略了一点导致Maximum call stack size exceeded的报错(如上方报错截图,陷入了死循环,最后导致栈溢出。

    后来发现是因为没有排除当前地址,就是/login地址,导致了循环调用

    所以修改代码为:

     1 import router from './router'
     2 import { getToken } from '@/util/auth'
     3 
     4 router.beforeEach((to, from, next)=>{
     5     const hastoken = getToken('token')
     6  
     7     if(hastoken){
     8         if(to.path === '/login'){
     9            //token存在,并且要去的是登录页面 则重定向到首页(工作台)
    10            next({ path: '/index' })
    11         }else{
    12             //token存在,要去的是登录页面以外的--访问的是其他路由
    13             next()
    14         }
    15     }else{
    16         //没有token 跳转到登录页
    17        if(to.path === '/login'){
    18            //排除登录页  避免死循环存在
    19            next();
    20        }else{
    21         next('/login')
    22        }
    23     }
    24 })
  • 相关阅读:
    RDP劫持:如何透明劫持RDS以及RemoteApp会话
    渗透测试工具备忘单
    Scrapy爬取慕课网(imooc)所有课程数据并存入MySQL数据库
    关于读取properties文件路径问题
    python随机生成测试数据用户名
    字典的应用(根据第一列,统计第二列之和)
    冒泡算法和排序算法运行速度比较
    判断日期天数
    Python爬虫抓取煎蛋(jandan.net)无聊图
    快递查询
  • 原文地址:https://www.cnblogs.com/yjiangling/p/12661554.html
Copyright © 2011-2022 走看看