vue-router 導航鉤子的具體使用方法
更新時間：2017年08月31日 11:12:38 作者：Lizzy0077
本篇文章主要介紹了vue-router 導航鉤子的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。
全局鉤子
1、router.beforeEach 注冊一個全局的 before 鉤子：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
每個鉤子方法接收三個參數(shù)：
- to: Route: 即將要進入的目標 路由對象
- from: Route: 當前導航正要離開的路由
- next: Function: 一定要調用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調用參數(shù)。
next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導航的狀態(tài)就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
2.afterEach同理，只是不用傳入next函數(shù)
示例：一個單頁面應用，返回首頁時，保存其在首頁的瀏覽位置。并且給每一個頁面title賦值
const router = new VueRouter({
base: __dirname,
routes
});
new Vue({ // eslint-disable-line
el: '#app',
render: h => h(App),
router
});
let indexScrollTop = 0;
router.beforeEach((route, redirect, next) => {
if (route.path !== '/') {
indexScrollTop = document.body.scrollTop;
}
document.title = route.meta.title || document.title;
next();
});
router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0;
} else {
Vue.nextTick(() => {
document.body.scrollTop = indexScrollTop;
});
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
resetFields 對整個表單進行重置,將所有字段值重置為空并移除校驗結果,下面這篇文章主要給大家介紹了關于vue中resetFields重置初始值不生效的原因的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue+echarts實現(xiàn)動態(tài)折線圖的方法與注意
這篇文章主要給大家介紹了關于vue+echarts實現(xiàn)動態(tài)折線圖的方法與注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue-cli構建的小說閱讀器，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
mockjs是用來模擬產生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)。這篇文章主要介紹了vue項目中mock.js的使用,需要的朋友可以參考下2019-05-05
巧妙運用v-model實現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運用v-model實現(xiàn)父子組件傳值的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
Vue中的assets和static目錄:使用場景及區(qū)別說明
這篇文章主要介紹了Vue中的assets和static目錄:使用場景及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義多選按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
appear 是一個在元素默認被顯示的情況下 調用進入動畫效果,使得元素在這種初次渲染情況下 執(zhí)行進入動畫的屬性,最近在學習vue3的動畫時遇到appear無法生效的問題,本文給大家詳細講解,感興趣的朋友一起看看吧2023-10-10