vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條
本文實(shí)例為大家分享了vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下
1. 安裝
npm install nprogress --save
2. 在main.js中導(dǎo)入
源碼~~~~~~方便你復(fù)制
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import iView from 'iview' import 'iview/dist/styles/iview.css' import moment from './plugins/moment' import axios from './plugins/axios' import NProgress from 'nprogress' import 'nprogress/nprogress.css' import { base } from './router/config' Vue.use(iView) Vue.use(moment) Vue.use(axios) Vue.config.productionTip = false // 配置NProgress進(jìn)度條選項(xiàng) —— 動(dòng)畫(huà)效果 NProgress.configure({ ease: 'ease', speed: 500 }) // 全局路由攔截-進(jìn)入頁(yè)面前執(zhí)行 router.beforeEach((to, from, next) => { if (to.path === `${base}login`) { return next() } // token驗(yàn)證,如果存儲(chǔ)在sessionStorage里的auth的值丟失,就回到登陸頁(yè)面,(開(kāi)發(fā)時(shí)可以注釋掉) // if (!sessionStorage.getItem('auth')) { // return next(`${base}login`) // } // 如果頁(yè)面在 / 默認(rèn)頁(yè)面,跳轉(zhuǎn)到登陸頁(yè)面(和vue路由重定向功能類(lèi)似) if (to.path === `${base}`) { return next(`${base}login`) } // NProgress開(kāi)始進(jìn)度條 NProgress.start() next() }) // 全局后置鉤子-常用于結(jié)束動(dòng)畫(huà)等 router.afterEach(transition => { // NProgress結(jié)束進(jìn)度條 NProgress.done() // console.log(transition) }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解如何在Vue3+TS的項(xiàng)目中使用NProgress進(jìn)度條
- vue Nprogress進(jìn)度條功能實(shí)現(xiàn)常見(jiàn)問(wèn)題
- Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)
- vue使用nprogress加載路由進(jìn)度條的方法
- vue使用nprogress實(shí)現(xiàn)進(jìn)度條
- Vue使用NProgress進(jìn)度條的方法
- 在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法
- Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果
相關(guān)文章
Electron進(jìn)程間通信的實(shí)現(xiàn)
本文主要介紹了Electron進(jìn)程間通信的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05vue實(shí)現(xiàn)省市區(qū)的級(jí)聯(lián)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)省市區(qū)的級(jí)聯(lián)選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10在vue3項(xiàng)目中給頁(yè)面添加水印的實(shí)現(xiàn)方法
這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08vue實(shí)現(xiàn)富文本編輯器詳細(xì)過(guò)程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01Vue實(shí)現(xiàn)數(shù)據(jù)篩選與搜索功能的示例代碼
在許多Web應(yīng)用程序中,數(shù)據(jù)篩選和搜索是關(guān)鍵的用戶(hù)體驗(yàn)功能,本文將深入探討在Vue中如何進(jìn)行數(shù)據(jù)篩選與搜索的實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法,需要的朋友可以參考下2017-12-12