1. router.beforeEach 路由守衛
我們可以使用這個方法,按需攔截用戶訪問某些敏感路由,例如:
router.beforeEach((to,from,next)=>{ //路由的全局前置守衛
if(to.path.indexOf('/account')==-1){ //判斷用戶訪問的是不是個人中心
next() //不是個人中心,直接放行
}else{
if(store.state.my.userInfo){ //判斷登錄狀態
next() //如果已經登錄,直接放行
}else{
next('/login') //如果沒有登錄,則跳至登錄頁
}
}
})
2. router.push 編程式導航
通過編程式導航,我們可以通過事件的方式觸發路由跳轉
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數,變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
3. router.go、router.back、router.forward 路由的進入與返回
router.go 作用等同于window.history.go
// 在瀏覽器記錄中前進一步,等同于 history.forward()
router.go(1)
// 后退一步記錄,等同于 history.back()
router.go(-1)
// 前進 3 步記錄
router.go(3)
4. router.addRoute 動態設置路由映射
添加一條新路由規則。如果該路由規則有 name,并且已經存在一個與之相同的名字,則會覆蓋它。
axios.get('/login',(result)=>{ //通過異步接口獲取對應用戶的特有路由配置
let {routerList} = result
routerList.forEach((item) => {
this.$router.addRoute(item) //通過addRoute方法依次將路由配置設置給router對象
})
})