解决控制台报出以下错误

发布时间 2023-12-08 08:24:35作者: 淡然置之
解决vue-router.esm.js:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx/xxx".报错问题

报错问题一:

刚刚在运行项目的时候,控制台报出以下错误

是在我尝试从登录页面跳转到后台页面发生的报错,导致这个问题产生的原因就是在某种情况下,Vue组件的编程逻辑触发了不必要的重复路由导航,比如我,也就是代码中可能多次调用了this.$router.push('/home/student'),然而当前已处于这个页面。

所以就要在代码进行路由跳转之前,先检查一下当前路由的状态,如果即将跳转到页面和当前所在页面相同,就避免再次进行页面跳转

加入以下代码即可解决问题

if (this.$route.path !=== '/home/student') {
  this.$router.push('/home/student');
}

报错问题二:

隔段时间又运行项目的时候报错:您可能需要一个适当的加载器来处理此文件类型。

这是在解析./node_modules/axios/lib/platform/index.js文件时,由于babel配置问题导致。为解决此问题,需要加一个babel配置文件或者更改现有的配置文件。

解决方法:在webpack配置文件---webpack.base.conf.js里的module rules中添加以下代码:

{
    test: /\.js$/,
    exclude: file => (
    /node_modules/.test(file) &&
    !/axios/.test(file)  // 只包括axios库
    ),
    use: {
    loader: 'babel-loader'
    }
},

如果rules里有以下代码,那么就注释掉或者删除,改成上述代码即可。

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), 		 resolve('node_modules/webpack-dev-server/client')]
},

那么,如何解决跨域问题呢?