vue手札 -- vue-router的简单流程

zqhxuyuan 发布于2019-08-20 11:18 / 316人阅读

因为路由权限问题，简单的看了一下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  //数据加载完在切换
 }

专线服务私有云 vue-router 手札 vue的计算属性 vue的cdn加速

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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