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

資訊專欄INFORMATION COLUMN

vue手札 -- vue-router的簡(jiǎn)單流程

zqhxuyuan / 488人閱讀

因?yàn)槁酚蓹?quán)限問(wèn)題，簡(jiǎn)單的看了一下vue-router。整理了一下router的一個(gè)簡(jiǎn)單過(guò)程

beforeEach -> canReuse -> canDeactivate -> canActivate -> deactivate -> afterEach -> activate

其中canDeactivate | canActivate | deactivate | activate這幾個(gè)鉤子涉及組件復(fù)用的問(wèn)題，所以有可能不會(huì)被調(diào)用，但是當(dāng)canReuse返回false時(shí)，就一定會(huì)被調(diào)用了

一、vue-router組成

vue-router組件有三個(gè)部分

1.link：即v-link
2.view：元素指令，即
3.router：核心部分
二、vue-router簡(jiǎn)單的一個(gè)流程 
1.url 變化

2.history監(jiān)聽(tīng)（onChange事件）
      # 例如：
         window.addEventListener(‘hashchange’, () => {})

 3.調(diào)用路由匹配（ this._match）
      # 會(huì)保存老的transition和新的transition

 4.走一遍beforeEach

 5.走startTransition開(kāi)始進(jìn)入transition的撕逼周期（也算是vue-router的核心所在）
 
      # 這里會(huì)涉及組件復(fù)用的問(wèn)題
         1).canReuse：調(diào)用canReuse鉤子
              看當(dāng)前的和將要跳轉(zhuǎn)的之間有沒(méi)有可重用的組件
              a/b/c
              a/b/d  =>  可復(fù)用[a,b]，需要銷毀[c]，需要生成[d]
              
         2).canDeactivate(c)：調(diào)用canDeactivate鉤子
             route: {
                 canDeactivate() {}
             }
             
         3).canActivate(d)：調(diào)用canActivate鉤子
         
         4).deactivate(c)：調(diào)用deactivate鉤子
         
         5)._afterEachHooks(c)：調(diào)用afterEach鉤子
         
         6).reuse([a,b])：調(diào)用data鉤子
         
         7).activate(d) ：調(diào)用activate | data鉤子

 6.若activate(d)，則調(diào)用vue中的build方法，新生成component
三、兩個(gè)應(yīng)用場(chǎng)景 1.組件復(fù)用(a/b/:id)

這次遇到了類似(a/b/:id)這樣的路由，這種路由一直都只是（:id）在變化，一直是被復(fù)用的，所以不會(huì)走canDeactive | canActivate | deactivate | activate，只會(huì)走_(dá)beforeEachHooks，_afterEachHooks、canReuse和reuse，也就是調(diào)用router.beforeEach，canReuse，router.afterEach和this.data。所以data、canReuse、beforeEach和afterEach是vue-router總是會(huì)走的四個(gè)方法當(dāng)然沒(méi)有被transition.abort()的前提下

 new VueRouter().beforeEach(function (transition) {
     if (transition.to.path === "/forbidden") {
        transition.abort()
      } else {
        transition.next()
      }
 })

 new VueRouter().afterEach(function (transition) {
   console.log("成功瀏覽到: " + transition.to.path)
 })

 route: {
     canReuse() {
       return true
     },
     data() {
         // TODO 沒(méi)有被transition.abort()的時(shí)候，會(huì)被調(diào)用
     }
 }
2.路由切換

有一種場(chǎng)景是組件a切換到組件b時(shí)，想要先停留在a，等b獲取了數(shù)據(jù)才進(jìn)行切換，想做到這個(gè)可以使用waitForData（這個(gè)好像在文檔中是沒(méi)提到的，在activate方法中用到了），在b組件作如下操作：

 route: {
     data() {
         // TODO 數(shù)據(jù)請(qǐng)求加載
     },
     waitForData: true  //數(shù)據(jù)加載完在切換
 }

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

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

相關(guān)文章

  • 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（上）

    摘要：前言由于博主最近又閑下來(lái)了，之前覺(jué)得的官方文檔比較難啃一直放到現(xiàn)在。文章會(huì)逐步分析每個(gè)處理的用意當(dāng)然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會(huì)補(bǔ)上構(gòu)建生產(chǎn)的配置分析，案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下 前言 由于博主最近又閑下來(lái)了，之前覺(jué)得webpack的官方文檔比較難啃一直放到現(xiàn)在。細(xì)心閱讀多個(gè)webpack配置案例后覺(jué)得還是得自己寫(xiě)個(gè)手腳架，當(dāng)然這個(gè)案例是基于vue的，...

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

  • 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（下）

    摘要：續(xù)前端臨床手札構(gòu)建逐步解構(gòu)上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細(xì)可以看分支構(gòu)建生產(chǎn)上一篇說(shuō)完了本地測(cè)試和是如何工作，接下來(lái)分析構(gòu)建生產(chǎn)模式下配置如何配置和每個(gè)模塊干了什么。 續(xù) 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（上） 工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

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

  • 利用vue-cli配合vue-router搭建一個(gè)完整的spa流程（二）

    摘要：利用配合搭建一個(gè)完整的流程一在一中寫(xiě)到了主要頁(yè)面的編寫(xiě)，現(xiàn)在開(kāi)始三個(gè)路由頁(yè)面的編寫(xiě)。每個(gè)列表綁定跳轉(zhuǎn)到詳情頁(yè)的函數(shù)。整體思想通過(guò)監(jiān)控的變化，變化后執(zhí)行函數(shù)，隨后重新獲取數(shù)據(jù)。 上篇文章太長(zhǎng)了，編寫(xiě)時(shí)拖動(dòng)太麻煩，重開(kāi)一篇。利用vue-cli配合vue-router搭建一個(gè)完整的spa流程（一） 在（一）中寫(xiě)到了主要頁(yè)面的編寫(xiě)，現(xiàn)在開(kāi)始三個(gè)路由頁(yè)面的編寫(xiě)。 第一步： 路由實(shí)例inde...

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

  • 利用vue-cli配合vue-router搭建一個(gè)完整的spa流程（一）

    摘要：利用配合搭建一個(gè)完整的流程二前言所用的一些基本操作。全局安裝創(chuàng)建一個(gè)基于的模板創(chuàng)建過(guò)程中，為必須，其他語(yǔ)法檢測(cè)，單元測(cè)試等按需求安裝。為入口文件，的實(shí)例在這里書(shū)寫(xiě)。掛載在中的標(biāo)簽上。定時(shí)器的作用是模擬數(shù)據(jù)請(qǐng)求延時(shí)。 2017/5/9 更新！GitHubpages搞了下，PC可以瀏覽?！?https://15901233752.github.io... showImg(https://...

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

  • 前端實(shí)驗(yàn)手札——拖拽旋轉(zhuǎn)圖片的實(shí)現(xiàn)及思路

    摘要：在拖拽旋轉(zhuǎn)圖片的實(shí)現(xiàn)中，最符合的就是上面這題的情況，接下來(lái)好好說(shuō)明一下。經(jīng)過(guò)按計(jì)算機(jī)推導(dǎo)出來(lái)的結(jié)論，反三角函數(shù)計(jì)算出來(lái)的結(jié)果是弧度，而一直使用的角表示的其實(shí)是角的弧度。拖拽圍繞著圖片的中心旋轉(zhuǎn)，圖片中心作為公式中的原點(diǎn)設(shè)為點(diǎn)使用。 讓我們來(lái)看看以下這道題： 已知點(diǎn)A(x1,y1)和點(diǎn)B(x2,y2)，求兩點(diǎn)求與圓點(diǎn)O(x0,y0)的夾角θ的角度：∠θ=arctan[(y2-y0)/(x...

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

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

0條評(píng)論

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