很多項(xiàng)目中需要在跳轉(zhuǎn)路由時(shí) 頁(yè)面頂部出現(xiàn)滾動(dòng)條動(dòng)畫 ，當(dāng)路由跳轉(zhuǎn)成功后進(jìn)度條消失 谤狡，這個(gè)功能還是挺多見的灸眼，所以在簡(jiǎn)書里做個(gè)簡(jiǎn)單記錄。
這個(gè)小功能具體實(shí)現(xiàn) 可以使用 插件 nprogress 配合 路由的前置守衛(wèi)和后置守衛(wèi) 墓懂，結(jié)合實(shí)際項(xiàng)目具體代碼如下：
import Vue from "vue"
import router from "../router.js"
import nprogress from 'nprogress' // 引入插件nprogress
import 'nprogress/nprogress.css' // 引入nprogress樣式css
let routerVue = new Vue();
nprogress.inc(1) // 進(jìn)度條的初始化
nprogress.configure({ // 進(jìn)度條的配置信息
easing: 'ease',
speed: 2000,
showSpinner: false
})
router.beforeEach((to, from, next) => {
nprogress.start() // 開始加載進(jìn)度條
let toPath = to.path.split('/')
// 以下代碼是實(shí)際項(xiàng)目中的邏輯代碼焰宣，
if(from.path == '/' && toPath.length == 2) {
if(parseInt(sessionStorage.getItem("defaultDisplay")) == 1) {
// if(toPath[1] == 'orgDataCenter') {
// next()
// } else {
// router.push("/orgDataCenter");
// }
if(toPath[1] == 'dataCenter'){
next()
}else{
router.push("/dataCenter");
}
} else if(parseInt(sessionStorage.getItem("defaultDisplay")) == 0) {
next()
} else {
routerVue.http('/mushu/login/getLoginUser', {}, 'get').then((data) => {
sessionStorage.setItem("defaultDisplay", data.defaultDisplay);
if(data.defaultDisplay == 1) {
// router.push("/orgDataCenter");
router.push("/dataCenter");
} else {
next()
}
}, () => {
next()
})
}
} else {
next()
}
})
// 后置守衛(wèi)里進(jìn)度條動(dòng)畫加載完畢
router.afterEach(() => {
nprogress.done()
})
