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)
})