How to realize the function of progress bar when the page is loaded by vue

This article mainly explains the "vue how to achieve page loading when the progress bar function", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue how to achieve page loading when the progress bar function" it!

Look at a picture first.

If our program has a progress bar at the top every time the page is switched, it will greatly improve the user experience.

Npropgress plug-in

Github address

Simple use-Vue project as an example (for detailed configuration, click the github address above to view the document)

The simplest way to use it: a progress bar is loaded every time the vue project switches routes.

Installation

Npm install-save nprogress

Introduce

Introduced in the routing configuration file, written to the two hook functions before and after the route is loaded

/ / introduce import NProgress from 'nprogress';import' nprogress/nprogress.css';// progress bar configuration item to write NProgress.configure ({showSpinner: false}); / / Route jump before hook function-execute progress bar to start loading router.beforeEach ((to, from, next) = > {NProgress.start ();}); / / Route jump hook function-execution progress bar loading ends router.afterEach () = > {NProgress.done () });

If introduced by cdn, it is as follows

Set the progress bar color

If it is a normal vue project, put the style in a css file and introduce it in the project main file main.js. Here is the css style

# nprogress .bar {background: # 00CC00! important; / / Custom Color}

Configuration item

Manually control the progress bar increment. The parameter range is 0-1. If no parameter is passed, each call will be incremented randomly, but it will never reach 100%, unless NProgress.done () is called.

/ / if the status of the progress bar before the call 50%NProgress.inc (0.2); / / 70% after the call

Progress bar loading completed

With parameter true: even if NProgress.start () is not called, the progress bar will be displayed and executed from 0% to 100%, and then disappear.

No arguments: if NProgress.start () is not called, this command will do nothing.

NProgress.done (true)

Minimum percentage when starting the progress bar (default is 0.08)

NProgress.configure ({minimum: 0.3})

You can use a template to change the tag. To keep the progress bar working, keep a role='bar' element in it and refer to the default template.

/ / default template NProgress.configure ({template: "..."}); / / example NProgress.configure ({template: "change tag"})

Use easing and speed to adjust animation settings, ease can pass CSS3 buffer animation strings (such as ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier), and speed is the animation speed (in ms). The default is ease 200, respectively

NProgress.configure ({easing: 'ease', speed: 200})

Turn off automatic increment behavior

NProgress.configure ({trickle: false})

Adjust the frequency of increments in milliseconds

NProgress.configure ({trickleSpeed: 200})

Turn off the spinner, which is on by default (the circle load icon in the upper right corner of the image above)

NProgress.configure ({showSpinner: false,})

Change the parent container

NProgress.configure ({parent:'#container'}); thank you for reading, the above is the content of "how to achieve the progress bar function when the page is loaded by vue". After the study of this article, I believe you have a deeper understanding of how to achieve the progress bar function when the page is loaded by vue. The specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!