Vue2 中常见Bug以及解决方案

1. [Vue warn]: Do not use built-in or reserved HTML elements as component id: A

  • 项目内部编译的时候没有问题,浏览器调试出现以上bug,

解决
注册组件的时候,名字有问题 ,例如 Animate 换成animate 后依旧存在问题,改为其他的即可 如 cssAnimate
类似 menu content 的命名方式都有问题,改为其他的即可

2. xxx.getFullYear is not a function

  • 获取年月日的函数没有获取到

解决
获取年月日的函数,前提是得有年 Data 的实例对象,new 出实例对象即可
{ {new Date(2022,6,7)

3. 二级路由跳转不显示内容

文件夹解构:Nest 问价下的 nest nest1 nest2

解决:
给二级路由添加以及路由的全部路径

{
    
    
    // 一级路由位置
    path: '/Nest/nest',
    component: () => import('@/views/Nest/nest.vue'),
    // 二级路由
    children: [{
    
    
      // 二级路由路径全写一级路由路径
      path: '/Nest/nest1',
      component: () => import('@/views/Nest/nest1.vue')
    }, {
    
    
      path: '/Nest/nest2', //    /nest/nest2
      component: ()=> import('@/views/Nest/nest2.vue')
    }]
  }

4.vue2中less、less-loader 中的版本问题

查看自己的webpack版本:npm view webpack -v

5. Error: Redirected when going from “/” to “/news” via a navigation guard.

路由处理的版本不一样导致

	router.beforeEach((to, from, next) => {
    
    
    if (to.meta.isLogin) {
    
    
        // 需要登录 判断值 从token中获取
        let token=store.state.LoginModules.userinfo.token;
        // 检查是否登录
        if(token){
    
    
            next()
        }
        // 路由版本问题,处理解决
       else{
    
    
            next('/login')
        }

    } else {
    
    
        //    不需要登录
        next()

    }
})

修改后

router.beforeEach((to, from, next) => {
    
    
    if (to.meta.isLogin) {
    
    
        // 需要登录 判断值 从token中获取
        let token=store.state.LoginModules.userinfo.token;
        // 检查是否登录
        if(token){
    
    
            next()
        }
        // 路由版本问题,处理解决
        if(!token){
    
    
            next()
        }else{
    
    
            next('/login')
        }

    } else {
    
    
        //    不需要登录
        next()

    }
})

6 TypeError: Cannot read properties of undefined (reading ‘cancelToken’)

分析:axios二次封装,对config 没有返回值,输出 console.log(config) 报错
解决如下:

// 请求拦截
instance.interceptors.request.use((config)=>{
    
    

    // console.log(config);
    return config
},(err)=>{
    
    
    return Promise.reject(err)
})

猜你喜欢

转载自blog.csdn.net/weixin_62643012/article/details/129469264
今日推荐