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

zqhxuyuan 發布于2019-08-20 11:18 / 481人閱讀

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

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

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

一、vue-router組成

vue-router組件有三個部分

1.link：即v-link
2.view：元素指令，即
3.router：核心部分

二、vue-router簡單的一個流程

1.url 變化

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

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

 4.走一遍beforeEach

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

 6.若activate(d)，則調用vue中的build方法，新生成component

三、兩個應用場景 1.組件復用(a/b/:id)

這次遇到了類似(a/b/:id)這樣的路由，這種路由一直都只是（:id）在變化，一直是被復用的，所以不會走canDeactive | canActivate | deactivate | activate，只會走_beforeEachHooks，_afterEachHooks、canReuse和reuse，也就是調用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()的時候，會被調用
     }
 }

2.路由切換

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

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

GPU云服務器云服務器 vue-router 手札 vue的計算屬性 vue的cdn加速

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80500.html

前端臨床手札——webpack構建逐步解構（上）

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

lowett 2019-08-22 10:36 評論0 收藏0
前端臨床手札——webpack構建逐步解構（下）

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

TerryCai 2019-08-22 10:37 評論0 收藏0
利用vue-cli配合vue-router搭建一個完整的spa流程（二）

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

mcterry 2019-08-20 16:05 評論0 收藏0
利用vue-cli配合vue-router搭建一個完整的spa流程（一）

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

cgh1999520 2019-08-20 16:01 評論0 收藏0
前端實驗手札——拖拽旋轉圖片的實現及思路

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

tianren124 2019-08-23 11:31 評論0 收藏0