国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue-router 導航鉤子的具體使用方法

來源:懂視網 責編:小采 時間:2020-11-27 22:31:20
文檔

vue-router 導航鉤子的具體使用方法

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

vue-router 提供的導航鉤子主要用來攔截導航,讓它完成跳轉或取消。

全局鉤子

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

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

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

每個鉤子方法接收三個參數:

  • to: Route: 即將要進入的目標 路由對象
  • from: Route: 當前導航正要離開的路由
  • next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
  • next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。

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

    next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷,然后進行一個新的導航。

    2.afterEach同理,只是不用傳入next函數

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

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    vue-router 導航鉤子的具體使用方法

    vue-router 導航鉤子的具體使用方法:vue-router 提供的導航鉤子主要用來攔截導航,讓它完成跳轉或取消。 全局鉤子 1、router.beforeEach 注冊一個全局的 before 鉤子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) =
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 欧美日韩国产另类一区二区三区 | 国产精品原创视频 | 欧美日韩欧美日韩 | 欧美国产中文 | 日本一区二区三区在线播放 | 亚洲免费一区 | 精品一区二区视频 | 国产欧美在线观看一区二区 | 国产精品毛片久久久久久久 | 欧美一区二区三 | 伊人精品视频 | 亚洲欧美色欧另类欧 | 欧美成人a级在线视频 | 亚洲男女网站 | 一级特黄牲大片免费视频 | 国产综合亚洲欧美日韩一区二区 | 精品一区二区三区五区六区七区 | 午夜精品一区二区三区在线观看 | 激情另类国内一区二区视频 | www.欧美色图 | 国产激情视频一区二区三区 | 日韩美在线 | 图片专区亚洲欧美另类 | 国产福利一区二区 | 3a毛片| 国产成人无精品久久久久国语 | 日本一区二区三区免费观看 | 在线国产一区二区三区 | 欧美一区精品二区三区 | 91精品国产91热久久p | 欧美在线观看一区 | 亚洲精品自产拍在线观看app | 日韩电影一区二区 | 国产精品久久成人影院 | 国产成人亚洲综合 | 97久久精品一区二区三区 | 日韩免费视频观看 | a级毛片在线免费观看 | 欧美日韩亚洲高清不卡一区二区三区 | 国产精品久久久久免费 | 欧美日韩精品一区二区三区视频在线 |