vue2移动端nprogress和postcss-px2rem插件使用

原创

已于 2022-04-19 09:06:11 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-04-13 15:35:10 首次发布

1、nprogress：就是页面顶部有进度条和loading，让移动端体验更好

先看效果

npm install --save nprogress

直接调用 start()或者done()来控制进度条。其他具体看官网： nprogress的简介及使用教程 - Made with Vuejs

router.js

// 插件自带的css
// import 'nprogress/nprogress.css'
// 这是自定义的css
import '@/common/css/nprogress.css'
import NProgress from 'nprogress'


// 以下俩段是解决 使用$router.push跳转到一个相同的路由时报错 问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originalReplace.call(this, loc