現(xiàn)在項目主要存在二個問題。
第一個問題:當(dāng)我們點擊不同item切換到不同頁面時鸭栖，title沒有變化，如下圖:
image.png
第二個問題:當(dāng)我們切換頁面時握巢，沒有進度條晕鹊。
我們先解決第一個問題。
導(dǎo)航守衛(wèi)
-
添加前置守衛(wèi)和后置鉤子
image.png
image.png
添加之前修改一點東西:
image.png
image.png
整體代碼:
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'
import userstatistics from '@/views/user/userstatistics'
import login from '@/views/login/login'
import home from '@/views/home/home'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/login',
name: 'login',
component: login,
meta: {
title: '登錄'
}
},
{
path: '/',
name: 'Test01',
component: Test01,
meta: {
title: '工作區(qū)域'
},
children: [
{
// path為空即默認頁面 home.vue
path: '',
name: 'home',
component: home,
meta: {
title: '首頁'
}
},
{
path: 'userlist',
name: 'userlist',
component: userlist,
meta: {
title: '用戶列表'
}
},
{
path: 'userstatistics',
name: 'userstatistics',
component: userstatistics,
meta: {
title: '用戶統(tǒng)計'
}
},
{
path: 'home',
name: 'home',
component: home,
meta: {
title: '工作區(qū)域'
}
}
]
}
]
})
export default router
router.beforeEach((to, from, next) => {
if (to.meta && to.meta.title) document.title = '[OA] - ' + to.meta.title
next()
})
router.afterEach((to, from) => {
// ...
})
meta里面的title就是對應(yīng)的標(biāo)題暴浦，效果如圖:
image.png
我們接下來解決第三個問題溅话，做一個進度條。
先引入包:
import iView from 'iview'然后加入代碼:
export default router
router.beforeEach((to, from, next) => {
iView.LoadingBar.start()
if (to.meta && to.meta.title) document.title = '[OA] - ' + to.meta.title
next()
})
router.afterEach((to, from) => {
iView.LoadingBar.finish()
})
效果如圖:
image.png
在main.js添加以下代碼可以改變進度條的顏色:
iView.LoadingBar.config({
color:'#xxxxxx'
})
