In vue projects, in order to reduce the time of loading on the first screen, lazy loading of routing is usually enabled. Lazy loading of routing and gizp can really help us greatly speed up the loading time of the first screen.
However, laziness loading of routes will make us have a loading time when we first open a new page. If we don’t have a prompt at this time, it will give people the feeling that I clicked on the page to jump but didn’t respond. So, at this time we can add a progress bar to inform the user.
For specific implementation, we use NProgress, the scrollbar effect plugin.
1. Installation:
cnpm install --save nprogress
2. Introduced in:
import NProgress from 'nprogress' import 'nprogress/'
3. Configure in:
({
easing: 'ease', // Animation method speed: 500, // Increasing the speed of the progress bar showSpinner: false, // Whether to display loading ico trickleSpeed: 200, // Automatic incremental interval minimum: 0.3 // Minimum percentage at initialization})
4. Set the routing hook in:
// Before the route enters ((to, from , next) => {
// Every time you switch page, call the progress bar ();
// If the loading time is long and uncertain, and you are worried that the progress bar will not be loaded, you can call it（）；//This will increase in random numbers and will never reach 100%. You can also set a specified increment next();
});
//When the route enters: close the progress bar(() => {
// Close the drop progress bar before entering a new page component soon ()
})
Supplement: vue page jump method
During the use of vue2.0, the jump between .vue files requires the path to be configured in the router, and the path is jumped. The html file jumps as follows:
<router-link to="/path"><button>Jump</button></router-link>
However, sometimes the requirement is that the page does not jump directly, there are confirmation pop-up boxes or other events. At this time, you need to set jump in js. The method is as follows:
this.$ ({path: ‘/…'}); pathFor the jump path，This method generates a history
this.$ ({name:'…'}) nameIt can also be used as a route
this.$ ({path:‘home',query:{obj:'…'}}) query：parameter，Availablethis.$ Get
this.$ ({path:‘home',params:{obj:'…'}}) query：parameter，Availablethis.$Get
this.$() This method does not generate history
this.$(n) Jump forward or backwardnPages
Summarize
This is the article about the progress bar function displayed above the browser window when the Vue project page jumps. For more related contents of the progress bar for the Vue page jump, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!