网络编程
位置：首页>> 网络编程>> JavaScript>> vue使用nprogress加载路由进度条的方法

vue使用nprogress加载路由进度条的方法

作者：向日葵_简默　　发布时间：2024-05-02 17:02:22　

标签：vue,nprogress,进度条

1、效果图

vue使用nprogress加载路由进度条的方法

2、安装


npm install --save nprogress

基本用法


NProgress.start();
NProgress.done();

3、在路由中使用


import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
NProgress.start();
next();
});

router.afterEach(() => {
NProgress.done();
});

PS：下面看下Vue使用NProgress的方法

NProgress是页面跳转是出现在浏览器顶部的进度条

官网：http://ricostacruz.com/nprogress/

github：https://github.com/rstacruz/nprogress

如下图所示，绿色的进度条就是NProgress实现的效果

vue使用nprogress加载路由进度条的方法

1、安装


$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();

2、使用


//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
NProgress.start()
next()
})

router.afterEach(() => {
NProgress.done()
})

来源：https://segmentfault.com/a/1190000022837972

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com