成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS每日一題：Vue-router有哪些鉤子？使用場(chǎng)景？

張金寶 / 1169人閱讀

摘要：?jiǎn)栍心男┿^子使用場(chǎng)景的實(shí)現(xiàn)可以點(diǎn)這里前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在什么什么之前什么什么之后英文叫專業(yè)點(diǎn)叫生命周期，裝逼點(diǎn)可以叫守衛(wèi)中也存在鉤子的概念分為三步記憶全局守衛(wèi)路由獨(dú)享守衛(wèi)組件獨(dú)享守衛(wèi)全局守衛(wèi)很好理解，全

20190218問

Vue-router有哪些鉤子？使用場(chǎng)景？

router的實(shí)現(xiàn)可以點(diǎn)這里

前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在什么什么之前,什么什么之后,英文叫hooks,專業(yè)點(diǎn)叫生命周期，裝逼點(diǎn)可以叫守衛(wèi)...

vue-router中也存在鉤子的概念,分為三步記憶

全局守衛(wèi)

路由獨(dú)享守衛(wèi)

組件獨(dú)享守衛(wèi)

全局守衛(wèi)

很好理解，全局守衛(wèi)就是能監(jiān)聽到全局的router動(dòng)作

router.beforeEach 路由前置時(shí)觸發(fā)

const router = new VueRouter({ ... })
// to 要進(jìn)入的目標(biāo)路由對(duì)象
// from 當(dāng)前的路由對(duì)象
// next resolve 這個(gè)鉤子，next執(zhí)行效果由next方法的參數(shù)決定
// next() 進(jìn)入管道中的下一個(gè)鉤子
// next(false) 中斷當(dāng)前導(dǎo)航
// next({path}) 當(dāng)前導(dǎo)航會(huì)中斷，跳轉(zhuǎn)到指定path
// next(error) 中斷導(dǎo)航且錯(cuò)誤傳遞給router.onErr回調(diào)
// 確保前置守衛(wèi)要調(diào)用next，否然鉤子不會(huì)進(jìn)入下一個(gè)管道
router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach 路由后置時(shí)觸發(fā)

// 與前置守衛(wèi)基本相同，不同是沒有next參數(shù)
router.afterEach((to, from) => {
  // ...
})

router.beforeResolve

跟router.beforeEach類似,在所有組件內(nèi)守衛(wèi)及異步路由組件解析后觸發(fā)

路由獨(dú)享守衛(wèi)

參數(shù)及意義同全局守衛(wèi)，只是定義的位置不同

const router = new VueRouter({
  routes: [
    {
      path: "/",
      component: Demo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      afterEnter: (to, from, next) => {
        // ...
      },
      
    }
  ]
})
組件獨(dú)享守衛(wèi)

組件內(nèi)新一個(gè)守衛(wèi), beforeRouteUpdate,在組件可以被復(fù)用的情況下觸發(fā)，如 /demo/:id, 在/demo/1 跳轉(zhuǎn)/demo/2的時(shí)候，/demo 可以被復(fù)用，這時(shí)會(huì)觸發(fā)beforeRouteUpdate

const Demo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    ...
  },
  // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
  beforeRouteUpdate (to, from, next) {
    ...
  },
  beforeRouteLeave (to, from, next) {
    ...
  }
}

注意在beforeRouteEnter前不能拿到當(dāng)前組件的this，因?yàn)榻M件還有被創(chuàng)建，我們可以通過next(vm => {console.log(vm)}) 回傳當(dāng)前組件的this進(jìn)行一些邏輯操作

使用場(chǎng)景

路由進(jìn)入前最典型的可以做一些權(quán)限控制, 路由離開時(shí)清除或存儲(chǔ)一些信息,任務(wù)等等

總結(jié)

vue-router中鉤子分為全局的，局部的，以及組件三種形式, 他們都有前置守衛(wèi)以及后置守衛(wèi), 其中組件的前置守衛(wèi)不能拿到當(dāng)前組件的this，因組件還沒有被創(chuàng)建，可以通過next的參數(shù)進(jìn)行回傳this，前置守衛(wèi)必須調(diào)用next方法，否則不會(huì)進(jìn)入下一個(gè)管道

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101826.html

相關(guān)文章

  • JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

    摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實(shí)現(xiàn)的其他事插件是一個(gè)具有屬性的對(duì)象。 20190327期 Webpack有哪些常見的Plugin？他們是解決什么問題的 定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實(shí)現(xiàn)的其他事 webpack 插件是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象。appl...

    songze 評(píng)論0 收藏0

  • JS每日一題:Es6中新增的數(shù)據(jù)類型有哪些？使用場(chǎng)景？

    摘要：?jiǎn)栔行略龅臄?shù)據(jù)類型有哪些使用場(chǎng)景中新增一種原始數(shù)據(jù)類型最大的特點(diǎn)是唯一性，值通過函數(shù)生成在中對(duì)象的屬性都是字符串，我們使用他人定義的對(duì)象，然后去新增自己的屬性，這樣容易起沖突覆蓋原有的屬性也可以看成為一個(gè)字符串，不過這個(gè)字符能保證是獨(dú)一無二 20190125問: Es6中新增的數(shù)據(jù)類型有哪些？使用場(chǎng)景？ es6中新增一種原始數(shù)據(jù)類型Symbol,最大的特點(diǎn)是唯一性，Symbol值通過S...

    jsummer 評(píng)論0 收藏0

  • JS每日一題:Es6中新增的數(shù)據(jù)類型有哪些？使用場(chǎng)景？

    摘要：?jiǎn)栔行略龅臄?shù)據(jù)類型有哪些使用場(chǎng)景中新增一種原始數(shù)據(jù)類型最大的特點(diǎn)是唯一性，值通過函數(shù)生成在中對(duì)象的屬性都是字符串，我們使用他人定義的對(duì)象，然后去新增自己的屬性，這樣容易起沖突覆蓋原有的屬性也可以看成為一個(gè)字符串，不過這個(gè)字符能保證是獨(dú)一無二 20190125問: Es6中新增的數(shù)據(jù)類型有哪些？使用場(chǎng)景？ es6中新增一種原始數(shù)據(jù)類型Symbol,最大的特點(diǎn)是唯一性，Symbol值通過S...

    DataPipeline 評(píng)論0 收藏0

  • JS每日一題: 前端的緩存有哪些？都適用什么場(chǎng)景？區(qū)別是什么？

    摘要：?jiǎn)柷岸说木彺嬗心男┒歼m用什么場(chǎng)景區(qū)別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強(qiáng)緩存強(qiáng)緩存主要是采用響應(yīng)頭中的和兩個(gè)字段進(jìn)行控制的值理解指定設(shè)置緩存最大的有效時(shí)間單位為指定響應(yīng)會(huì)被緩存，并且在多用戶間共享響應(yīng)只作為私有的緩存， 20190116問: 前端的緩存有哪些？都適用什么場(chǎng)景？區(qū)別是什么？ 參考回答 前端緩存分為兩部分: http 緩存 瀏覽器緩存 http 緩存 強(qiáng)...

    MockingBird 評(píng)論0 收藏0

  • JS每日一題: 前端的緩存有哪些？都適用什么場(chǎng)景？區(qū)別是什么？

    摘要：?jiǎn)柷岸说木彺嬗心男┒歼m用什么場(chǎng)景區(qū)別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強(qiáng)緩存強(qiáng)緩存主要是采用響應(yīng)頭中的和兩個(gè)字段進(jìn)行控制的值理解指定設(shè)置緩存最大的有效時(shí)間單位為指定響應(yīng)會(huì)被緩存，并且在多用戶間共享響應(yīng)只作為私有的緩存， 20190116問: 前端的緩存有哪些？都適用什么場(chǎng)景？區(qū)別是什么？ 參考回答 前端緩存分為兩部分: http 緩存 瀏覽器緩存 http 緩存 強(qiáng)...

    lolomaco 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

張金寶

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<