欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue Nprogress進度條功能實現(xiàn)常見問題

 更新時間:2021年07月26日 15:27:27   作者:yehaocheng520  
這篇文章主要介紹了vue Nprogress進度條功能實現(xiàn),NProgress是頁面跳轉是出現(xiàn)在瀏覽器頂部的進度條,本文通過實例代碼給大家講解,需要的朋友可以參考下

NProgress是頁面跳轉是出現(xiàn)在瀏覽器頂部的進度條
官網(wǎng):http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress

下圖中的這種頂部進度條是非常常見的,在vue項目中有對應的插件。Nprogress

在這里插入圖片描述

Nprogress進度條的使用方法如下:

1.安裝nprogress插件

npm install --save nprogress
注意此處的--save等同于-s,就是將插件的名稱及版本號保存到package.json文件中的dependencies中,這樣其他人克隆項目后,可以通過npm install就可以下載下來所有的插件到node_modules中了。

2.nprogress插件的使用

此處進度條主要用于頁面路由的跳轉過程中,因此可以直接在router/index.js中使用:

在路由跳轉之前,開啟進度條加載,在路由跳轉之后,結束進度條的加載。

router/index.js文件內容如下:

import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
import HomeLayout form "@/views/home/layout";
import NProgress from "nprogress";
import userCenter from "./modules/userCenter";
import 'nprogress/nprogress.css'
Vue.use(VueRouter);
NProgress.inc(0.2);
NProgress.configure({easing:'ease',speed:2000,showSpinner:false,trickle:false})
const routes = [{
	path:"/",
	name:"Index",
	redirect:"/index"
},{
	path:"/index",
	name:'Index',
	component:()=>import ('@/views/home/index.vue'),
	meta:{title:'首頁'}
},{
	path:'/home',
	name:'Home',
	component:()=>import('@/views/home/main'),
	meta:{title:'首頁'}
},{
	path:'/login',
	name:'Login',
	component:()=>import ('@/views/login'),
	meta:{title:'登錄'}
},{
	path:'/register',
	name:'register',
	component:()=>import('@/views/register'),
	meta:{title:'注冊'}
},{
	path:'/404',
	name:'404',
	component:()=>import('@/views/errorPage')
},{
	path:'*',
	redirect:'/404'
}]
const router = new VueRouter({
	mode:'history',
	routes
})
//路由跳轉之前做攔截
router.beforeEach((to,from,next)=>{
	//頁面跳轉之前,開啟進度條
	NProgress.start();
	//某些攔截操作,是否登錄權限等...
	const token = window.localStorage.getItem('token');//從localstorage中獲取緩存
	if(to.meta.title){
		document.title = to.meta.title;//將瀏覽器選項卡的標題改為頁面的title
	}
	store.commit('changeCurrentPage',to.path);
	const reg = /[a-zA-Z]+\/$/;
	//不需要校驗的路由直接跳轉
	if(!to.meta.requireAuth){
		if(reg.test(to.path)){
			next(to.path.replace(reg,''));
			return;
		}
		next();
		return
	}
	if(token&&to.name!=='Index'){
		//已登錄且要跳轉的頁面不是登錄頁面
		if(reg.test(to.path)){
			next(to.path.replace(reg,''));
			return;
		}
		next();//可以直接跳轉
	}else if(token && to.name == 'Index'){
		//已登錄且要跳轉的頁面是登錄頁
		if(reg.test(to.path)){
			next(to.path.replace(reg,''));
			return
		}
		next('/home');//直接跳轉到首頁
	}else if(!token && to.name !='Index'){
		//未登錄且要跳轉的頁面不是登錄頁
		next('/index');//跳轉到登錄頁
	}else{
		if(reg.test(to.path)){
			next(to.path.replace(reg,''));
			return;
		}
		next()
	}
})
router.afterEach(to=>{
	NProgress.done();
	window.scrollTo(0,0);
})
//處理重復點擊當前頁菜單,出現(xiàn)警告問題
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location){
	return originalPush.call(this,location).catch(err=>err);
}
export default router;

上面的重點如下:

引入插件及對應的css

在這里插入圖片描述

nprogress配置參數(shù)

在這里插入圖片描述

3.router.beforeEach路由跳轉之前攔截時,加載進度條

在這里插入圖片描述

4.router.afterEach路由跳轉結束后,關閉進度條

在這里插入圖片描述 

3.nprogress插件修改樣式

App.vue文件中的style樣式中,添加如下代碼,更改進度條的顏色

#nprogress .bar {
  background: #f90 !important; //自定義顏色
}

到此這篇關于vue Nprogress進度條功能實現(xiàn)的文章就介紹到這了,更多相關vue Nprogress進度條內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue操作dom并為dom增加點擊事件方式

    vue操作dom并為dom增加點擊事件方式

    這篇文章主要介紹了vue操作dom并為dom增加點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • Vue組件化開發(fā)思考

    Vue組件化開發(fā)思考

    這篇文章主要介紹了Vue組件化開發(fā)的思考以及相關的原理介紹,如果你對此有興趣,可以學習參考下。
    2018-02-02
  • Vue全局注冊與局部注冊兩種組件注冊的方式

    Vue全局注冊與局部注冊兩種組件注冊的方式

    本文主要介紹了Vue全局注冊與局部注冊兩種組件注冊的方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • @vue/cli4.x版本的vue.config.js常用配置方式

    @vue/cli4.x版本的vue.config.js常用配置方式

    這篇文章主要介紹了@vue/cli4.x版本的vue.config.js常用配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue3基于elementplus 簡單實現(xiàn)表格二次封裝過程

    vue3基于elementplus 簡單實現(xiàn)表格二次封裝過程

    公司渲染表格數(shù)據(jù)時需要將空數(shù)據(jù)顯示‘-’,并且對于每一列數(shù)據(jù)的顯示也有一定的要求,基于這個需求對element-plus簡單進行了二次封裝,這篇文章主要介紹了vue3基于elementplus 簡單實現(xiàn)表格二次封裝過程,需要的朋友可以參考下
    2024-05-05
  • Vue 設置axios請求格式為form-data的操作步驟

    Vue 設置axios請求格式為form-data的操作步驟

    今天小編就為大家分享一篇Vue 設置axios請求格式為form-data的操作步驟,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue2.x 的雙向綁定原理及實現(xiàn)

    Vue2.x 的雙向綁定原理及實現(xiàn)

    這篇文章主要介紹了Vue2.x 的雙向綁定原理,Vue 是利用的 Object.defineProperty() 方法進行的數(shù)據(jù)劫持,利用 set、get 來檢測數(shù)據(jù)的讀寫。需要的朋友可以參考下面文章的具體內容
    2021-09-09
  • 淺析Vue 中的 render 函數(shù)

    淺析Vue 中的 render 函數(shù)

    在vue中我們使用模板HTML語法組建頁面的,使用render函數(shù)我們可以用js語言來構建DOM,今天小編就通過本文給大家簡單介紹下Vue 中 render 函數(shù),需要的朋友可以參考下
    2020-02-02
  • Vue內部渲染視圖的方法

    Vue內部渲染視圖的方法

    這篇文章主要介紹了Vue內部渲染視圖的方法,本文通過實例代碼圖文并茂的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • element 動態(tài)合并表格的步驟

    element 動態(tài)合并表格的步驟

    這篇文章主要介紹了element 動態(tài)合并表格的步驟,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-12-12

最新評論