六面体-大师的网站

vue-router 升级到3.0.x 后，重复点击导航时，控制台出现报错

报错原因

vue router ≥ v3.1 后 ，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的警告

解决方法

• 【方法一】降低版本

    npm i vue-router@3.0 -S

• 【方法二】在router文件夹下增加下列代码

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//以下代码解决路由地址重复点击的报错问题
const originalPush = Router.prototype.push
   Router.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

参考链接

• 解决Vue中重复点击相同路由控制台报错问题
• vue 解决重复点击路由报错问题

1.在相关目录中创建好``文件
2.在main.js中引入

import ‘./style/reset.css’
// 即完成,设置已生效

引入页面加载进度库： nprogress

import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // NProgress Configuration
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
  // start progress bar
  NProgress.start()
})
router.afterEach(() => {
    NProgress.done();
});  

报错：loaderContext.getResolve is not a function

报错原因：less-loader版本太高
解决办法：修改 package.json中 将sass和sass-loader版本

"sass": "^1.22.9",
"sass-loader": "^7.2.0",