nprogress的使用

这里写自定义目录标题

1，安装
2. 导入
3. 配置
4. 使用
下面是我在项目中的使用

1，安装

npm install --save nprogress

2. 导入

import { configure, start, done } from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

3. 配置

configure({ showSpinner: false }) // NProgress Configuration

4. 使用

// 开启加载提示进度条start()// 路由完成之后结束加载提示进度条done()

下面是我在项目中的使用

import { configure, start, done } from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import Vue from 'vue'
import Router from 'vue-router'
import { getToken } from '@/utils/token'
import getPageTitle from '@/utils/pageTitle'
import constantRoutes from './router'configure({ showSpinner: false }) // NProgress Configuration
Vue.use(Router)export const router = new Router({mode: 'history', // hashroutes: constantRoutes
})// 白名单页面，不需要登录
const whiteList = ['/login']
router.beforeEach((to, from, next) => {console.log('to', to)console.log('from', from)// 开启加载提示进度条start()// 设置浏览器的标题document.title = getPageTitle(to.meta.title)const token = getToken()console.log('token--->', token)if (token) {if (to.path === '/401') {next()} else {const routes = router.getRoutes().filter((r) => r.path === to.path)// 如果目标路由存在if (routes.length) {next()} else {next('/404')}}} else {// 白名单中的路由不用登录if (whiteList.includes(to.path)) {next()} else {next('/login')}}
})router.afterEach((to, from, next) => {// 路由完成之后结束加载提示进度条done()window.scrollTo(0, 0)
})export default router

nprogress的使用相关推荐

案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条
首先下载bootstrap和nprogress两个库 index.html <!DOCTYPE html> <html lang="en"> <hea ...
nprogress.js 头部进度条使用方法
nprogress.js 头部进度条引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...
前端学习（2038）vue之电商管理系统电商系统之优化nprogress加载进度条
main.js import Vue from 'vue' import App from './App.vue' import router from './router' import './pl ...
PocketLibs（3）—— 进度条 NProgress
依赖jQuery. import nprogress from 'nprogress' import 'nprogress/nprogress.css'$('#btn-loading').on('cl ...
小巧的Web进度条组件 - NProgress
NProgress , 小进度条插件, 用于页面载入等待,非常适合Ajax 密集型应用程序. NProgress小巧是因为其JS和CSS文件的总的大小是13K多. NProgress可以适合多种Web ...
nprogress页面加载进度条
入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-router' import router fr ...
NProgress.js进度条
目录一.代码二.效果演示一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...

nprogress的使用

这里写自定义目录标题

1，安装

2. 导入

3. 配置

4. 使用

下面是我在项目中的使用

nprogress的使用相关推荐

最新文章

热门文章