亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue手札 -- vue-router的簡單流程

zqhxuyuan / 536人閱讀

因為路由權(quán)限問題，簡單的看了一下vue-router。整理了一下router的一個簡單過程

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

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

一、vue-router組成

vue-router組件有三個部分

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

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

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

 4.走一遍beforeEach

 5.走startTransition開始進入transition的撕逼周期（也算是vue-router的核心所在）
 
      # 這里會涉及組件復(fù)用的問題
         1).canReuse：調(diào)用canReuse鉤子
              看當前的和將要跳轉(zhuǎn)的之間有沒有可重用的組件
              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
三、兩個應(yīng)用場景 1.組件復(fù)用(a/b/:id)

這次遇到了類似(a/b/:id)這樣的路由，這種路由一直都只是（:id）在變化，一直是被復(fù)用的，所以不會走canDeactive | canActivate | deactivate | activate，只會走_beforeEachHooks，_afterEachHooks、canReuse和reuse，也就是調(diào)用router.beforeEach，canReuse，router.afterEach和this.data。所以data、canReuse、beforeEach和afterEach是vue-router總是會走的四個方法當然沒有被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 沒有被transition.abort()的時候，會被調(diào)用
     }
 }
2.路由切換

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/80500.html

相關(guān)文章

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

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

    lowett 評論0 收藏0

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

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

    TerryCai 評論0 收藏0

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

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

    mcterry 評論0 收藏0

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

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

    cgh1999520 評論0 收藏0

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

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

    tianren124 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<