Nuxt 框架 使用 Nprogress 加载条

Nuxt 框架 使用 Nprogress 加载条

文章解析：

安装 nprogress

创建 router.js 插件

nuxt.config.js 配置 使用 router.js 插件

安装

npm install  nprogress --save

实例

创建 router.js 文件

---

import VueRouter from 'vue-router'
import Vue from 'vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

Vue.use(VueRouter)

/*全局配置 加载条*/ 
NProgress.configure({
  easing: 'ease-out-in',  // 动画方式
  speed: 700,  // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
})

export default ({app}) => {
  app.router.afterEach((to, from, next) => {  
      console.log("start" + from.path)
      NProgress.start();
      next 
  })

  app.router.afterEach((to, form) => {
    console.log("end" + to.path)
    NProgress.done()
  });
}

修改样式

---

在入口文件 设置样式

<style>
	#nprogress .bar {
	  height: 2.5px !important; //进度条高度
	  background: rgba(255, 0, 0, 0.66) !important; //自定义颜色
	}
<style>

插件配置

---

修改 nuxt.config.js

plugins:[
  {src: '~/plugins/router.js', ssr: false},
 ]