Common problems in implementing the progress bar function of vue Nprogress

NProgress is the progress bar that appears at the top of the browser when the page jumps. Official website: http://ricostacruz.com/nprogress/
github: https://github.com/rstacruz/nprogress

The top progress bar in the picture below is very common, and there is a corresponding plug-in in the vue project. Nprogress

insert image description here

The usage of Nprogress progress bar is as follows:

1. Install the nprogress plugin

npm install --save nprogress
Note that --save here is equivalent to -s , which saves the name and version number of the plug-in to dependencies in the package.json file, so that when others clone the project, they can download all the plug-ins to node_modules through npm install .

2. Use of nprogress plugin

The progress bar here is mainly used in the jump process of page routing, so it can be used directly in router/index.js :

Before the route jumps, start the progress bar loading, and after the route jumps, end the progress bar loading.

The contents of router/index.js file are as follows:

import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
import HomeLayout form "@/views/home/layout";
import NProgress from "nprogress";
import userCenter from "./modules/userCenter";
import 'nprogress/nprogress.css'
Vue.use(VueRouter);
NProgress.inc(0.2);
NProgress.configure({easing:'ease',speed:2000,showSpinner:false,trickle:false})
const routes = [{
	path:"/",
	name:"Index",
	redirect:"/index"
},{
	path:"/index",
	name:'Index',
	component:()=>import ('@/views/home/index.vue'),
	meta:{title:'Homepage'}
},{
	path:'/home',
	name:'Home',
	component:()=>import('@/views/home/main'),
	meta:{title:'Homepage'}
},{
	path:'/login',
	name:'Login',
	component:()=>import ('@/views/login'),
	meta:{title:'Login'}
},{
	path:'/register',
	name:'register',
	component:()=>import('@/views/register'),
	meta:{title:'Register'}
},{
	path:'/404',
	name:'404',
	component:()=>import('@/views/errorPage')
},{
	path:'*',
	redirect:'/404'
}]
const router = new VueRouter({
	mode:'history',
	routes
})
//Intercept before routing router.beforeEach((to,from,next)=>{
	//Before the page jumps, start the progress bar NProgress.start();
	//Some interception operations, login permissions, etc...
	const token = window.localStorage.getItem('token'); //Get cache from localstorage if(to.meta.title){
		document.title = to.meta.title; //Change the title of the browser tab to the title of the page
	}
	store.commit('changeCurrentPage',to.path);
	const reg = /[a-zA-Z]+\/$/;
	//Directly redirect to routes that do not require verification if(!to.meta.requireAuth){
		if (reg.test(to.path)){
			next(to.path.replace(reg,''));
			return;
		}
		next();
		return
	}
	if(token&&to.name!=='Index'){
		// Already logged in and the page to be redirected is not the login page if(reg.test(to.path)){
			next(to.path.replace(reg,''));
			return;
		}
		next();//You can jump directly }else if(token && to.name == 'Index'){
		//The page you are logged in and want to jump to is the login page if(reg.test(to.path)){
			next(to.path.replace(reg,''));
			return
		}
		next('/home');//jump directly to the homepage }else if(!token && to.name !='Index'){
		//Not logged in and the page to be jumped is not the login page next('/index');//Jump to the login page }else{
		if (reg.test(to.path)){
			next(to.path.replace(reg,''));
			return;
		}
		next()
	}
})
router.afterEach(to=>{
	NProgress.done();
	window.scrollTo(0,0);
})
//Handle repeated clicks on the current page menu, warning issues const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location){
	return originalPush.call(this,location).catch(err=>err);
}
export default router;

The key points above are as follows:

Introduce plug-ins and corresponding css

insert image description here

nprogress configuration parameter

insert image description here

3. When router.beforeEach intercepts before the route jump, the loading progress bar

insert image description here

4. After router.afterEach route jump ends, close the progress bar

insert image description here

3. nprogress plugin to modify the style

In style of the App.vue file, add the following code to change the color of the progress bar

#nprogress .bar {
  background: #f90 !important; //custom color}

This is the end of this article about the implementation of vue Nprogress progress bar function. For more related vue Nprogress progress bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: