vue-router 導(dǎo)航鉤子的具體使用方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:31:20

vue-router 導(dǎo)航鉤子的具體使用方法

vue-router 導(dǎo)航鉤子的具體使用方法:vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。全局鉤子 1、router.beforeEach 注冊一個全局的 before 鉤子： const router = new VueRouter({ ... }) router.beforeEach((to, from, next) =

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue-router 導(dǎo)航鉤子的具體使用方法:vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。全局鉤子 1、router.beforeEach 注冊一個全局的 before 鉤子： const router = new VueRouter({ ... }) router.beforeEach((to, from, next) =

vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。

全局鉤子

1、router.beforeEach 注冊一個全局的 before 鉤子：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

每個鉤子方法接收三個參數(shù)：

to: Route: 即將要進(jìn)入的目標(biāo) 路由對象

from: Route: 當(dāng)前導(dǎo)航正要離開的路由

next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

next(): 進(jìn)行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應(yīng)的地址。

next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。

2.afterEach同理，只是不用傳入next函數(shù)

示例：一個單頁面應(yīng)用，返回首頁時，保存其在首頁的瀏覽位置。并且給每一個頁面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;
 });
 }
})

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue-router 導(dǎo)航鉤子的具體使用方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：說明 vue-router vuerouter

熱門焦點(diǎn)

vue-router 導(dǎo)航鉤子的具體使用方法

vue-router 導(dǎo)航鉤子的具體使用方法

vue-router 導(dǎo)航鉤子的具體使用方法

最新推薦

猜你喜歡

熱門推薦