路由導航鈎子做鑒權
/router/index.js
var router;
export default router = new Router({
routes : [
{
path: '/profile/address',
name: 'MyAddress',
component: MyAddress,
meta: {
title: '我的地址',
requireAuth: true // 只要此字段為true，必須做鑒權處理
}
},
// 更多...
]
})
let indexScrollTop = 0
router.beforeEach((to, from, next) => {
// 路由進入下一個路由對象前，判斷是否需要登陸
// 在路由meta對象中由個requireAuth字段，只要此字段為true，必須做鑒權處理
if (to.matched.some(res => res.meta.requireAuth)) {
// userData為存儲在本地的一些用戶信息
let userData = getUserData()
// 未登錄和已經登錄的處理
// getUserData方法處理后如果userData.token沒有值就是undefined，下面直接判斷
if (userData.token === undefined) {
// 執行到此處說明沒有登錄，君可按需處理之后再執行如下方法去登錄頁面
// 我這里沒有其他處理，直接去了登錄頁面
next({
path: '/login',
query: {
redirect: to.path // 將跳轉的路由path作為參數，登錄成功后再跳轉到該路由
}
})
} else {
// 執行到說明本地存儲有用戶信息
// 但是用戶信息是否過期還是需要驗證一下滴
let overdueTime = userData.overdueTime
let nowTime = +new Date
// 登陸過期和未過期
if (nowTime > overdueTime) {
// 登錄過期的處理，君可按需處理之后再執行如下方法去登錄頁面
// 我這里沒有其他處理，直接去了登錄頁面
next({
path: '/login',
query: {
redirect: to.path
}
})
} else {
next()
}
}
} else {
next()
}
if (to.path !== '/') {
// 記錄現在滾動的位置
indexScrollTop = document.body.scrollTop
}
document.title = to.meta.title || document.title
})
router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0
} else {
Vue.nextTick(() => {
// 回到之前滾動位置
document.body.scrollTop = indexScrollTop
})
}
})
export default router
導航去登錄頁面調用的next方法里面有個query對象，攜帶了目標路由的地址，這是因為在登錄成功后我們需要重定向到目標頁面。
知識點
router-link
1.在HTML5 history模式下使用了base選項,所有to屬性可以不用寫基路徑
2.會攔擊點擊事件,不會重新加載頁面.
3.router-link默認渲染為a標簽,我們可以通過tag屬性設置為別的標簽(常用的li).
4.to屬性可以綁定name(命名組件),query(帶查詢參數)
<router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}" tag="li">
</router-link>
.
router-view
1.router-view: 渲染匹配到的視圖組件,router-view匹配到的視圖組件里面還可以嵌套自己的router-view.根據嵌套路徑(children)來繼續渲染.
2.router-view可以通過name屬性來渲染對應的component下相應的組件
3.router-view可以配合transition與keep-alive使用,如果同時使用,里面要使用keep-alive.
4.keep-alive緩存router的請求
<transition name="fade" mode="out-in" key="$route.path">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
---------------------
作者：貓老板的豆
來源：CSDN
原文：https://blog.csdn.net/x550392236/article/details/80696412
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！