vue-router 钩子函数 （beforeEach、afterEach、beforeEnter）

（一）全局的

beforeEach：前置钩子函数

三个参数：

to ：路由将要跳转的路劲信息，信息是包含在对象里边的

from：路由跳转前的路由信息，也是一个对象的形式

next：路由的控制参数，常用的有next（true）和next（false）决定要不要跳转

使用场景：未登录去下单，跳转到登录页面

2afterEach：后置钩子函数

两个参数：没有next

to：去哪

from：从哪里来

使用场景：改变浏览器title

（二）单个路由独享的

1beforeEnter 有三个参数：

to：路由将要跳转的路劲信息，信息是包含在对象里边的

from：路由跳转前的路由信息，也是一个对象的形式

next：路由的控制参数，常用的有next（true）和next（false）

在路由配置文件（/src/router/indexjs）中写钩子函数

（三）组件级的

1beforeRouteEnter  ：  在路由进入前的钩子函数  不能获取组件实例  ‘this’  这时组件 this 还没有被创建

使用场景：进入这个路由前你要做什么初始化 *** 作

2beforeRouteUpdate  ：  当前路由改变，改组件被复用时   可以访问组件  ‘this’

使用场景：对于一个带有动态路由参数的路径／box／：id  ，在／box／b 和／box／c  之间跳转的时候由于会渲染同样的组件Box，因此组件实例会被复用，这个钩子函数在这种情况下会被调用

3beforeRouteLeave  ：  离开路由前的钩子函数，可以访问组件实例 ‘this’ 

使用场景：清除定时器等等

有三种方式可以植入路由导航过程中：

1、全局的

2、单个路由独享的

3、组件级的

全局导航钩子主要有两种钩子：前置守卫、后置钩子，

这三个参数 to 、from 、next 分别的作用：

to: Route，代表要进入的目标，它是一个路由对象

from: Route，代表当前正要离开的路由，同样也是一个路由对象

next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身

至于他的参数的使用，和全局前置守卫是一样的

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

我们看一下他的具体用法：

需要注意是：

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认是，会执行这个回调，这时就可以访问组件实例了，如：

因为归根结底，支持回调是为了解决 this 问题，而其他两个钩子的 this 可以正确访问到组件实例，所有没有必要使用回调

如果是在父附件中,可以通过ref

<component1 ref="ref1"></component>

在父组件中 this$refsref1

在子组件中通过 this$parent获取父组件

    html标签中使用的组件在使用插槽后互相之间可以嵌套，被嵌套的称为嵌套的子组件，嵌套的叫父组件，所有的组件都有一个根组件即vue实例管理的容器。

    使用 $parent 获取父组件的实例。

可以在控制台看到父组件的vue实例

    当组件嵌套比较深，而又需要最外层组件的数据时，可以通过 $parent$parent $parent 一层一层父类往上至根目录，

或者使用  $root 直接获取根组件

    使用 $children 获取所有子组件实例。

可在控制台看见根据组件在页面中的顺序返回的所有子组件组成的数组

要使用子组件的值时可使用此方法，用下标选择需要的子组件。

因为使用 $children 获取的数组里顺序是按是在页面中使用的顺序来排序的，当有的业务不确定使用顺序，并且还要使用子组件的值的时候，就需要按 ref 标识来获取子组件。

在使用子自定义组件时，给组件标签添加一个 ref 属性，然后就可以通过 $refs 返回拥有ref属性的组件：

在控制台可以看见获取到的子组件数组：

    因为返回的是对象，所以可以通过ref值来 *** 作子组件的值。

路由拦截器就是路由守卫，分为全局守卫和局部守卫

全局守卫写在路由定义的文件里面，每当路由切换就会执行

// 进入页面之前执行

routerbeforeEach((to, from, next) => {

  // 

  })

// 进入页面之后执行

routerafterEach((to, from) => {

  // 

  })

局部守卫写在vue组件里面，只对当前组件生效，和vue生命周期函数写法一样

beforeRouteEnter (to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不！能！获取组件实例 `this`

    // 因为当守卫执行前，组件实例还没被创建

  },

  beforeRouteUpdate (to, from, next) {

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  }

更多信息参考vue-router官方文档

prop

event

style和class

natvie修饰符

$listeners

v-model

sync修饰符

$parent 和 $children

$slots 和 $scopedSlots

ref

最常见的组件通信方式，由父组件向子组件传递。prop可接收一个数组或对象

子组件向父组件发送通知，并传递参数

子组件

父组件

父组件可以向子组件传递style 和 class ，style 和 class将合并到子组件根元素上

父组件

子组件

最终渲染结果

父组件在使用子组件时，在子组件上定义一些属性，这些属性将作用于子组件的根元素上，但是不包括style和class

父组件

子组件

最终渲染结果

Tip：子组件可以通过定义 inheritAttrs：false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据

在注册事件时，父组件可以通过 navite 修饰符，将事件注册到子组件根元素上

父组件

子组件

子组件可以通过 $listeners 获取父组件传递过来的所有处理函数

父组件在使用子组件时，可以在子组件上绑定v-model，子组件通过定义model的prop和event还获取父组件定义的值

父组件

<compn v-model=" "datas" />

子组件

和 v-model类似，用于双向数据绑定，不同点在于 v-model只能针对一个数据进行绑定，而 sync 修饰符没有限制

子组件

父组件

在组件内部，可以通过$parent 和$children属性，分别获取当前组件的父组件和子组件实例

ref

在使用组件时，可以通过在组件上定义ref来获取组件实例

provide和inject 可以实现深层组件通信，顶层组件只需定义provide，底层组件通过inject接受数据

顶层组件

如果一个组将改变了地址栏，所有监听地址栏的组将都会做出相应的改变，

vuex 过于笨重，通常不建议在小型项目中使用，小型项目可以使用store 或 eventbus代替vuex，vuex本质上就是一个数据仓库。在此不做过多赘述，先挖一个坑，下回再叙。

store模式其实就是一个普通的js模块，各组件可以导入该模块，将数据放到data里面，此时store就具有响应式了。

tip: store模式的缺点是无法跟踪数据的改变，因为所有组件都可以更改数据

原理：在创建Vue实例时，Vue会遍历data选项的属性，利用ObjectdefineProperty()为属性添加getter和setter对数据的读取进行劫持（getter用来依赖手机，setter用来派发更新），并且在内部追踪依赖，在属性被访问和修改时通知变化。每个组件实例会有相应的watcher实例，会在组件渲染过程中记录依赖的所有数据属性，之后依赖项被改动时，setter方法会通知依赖与此data的watcher实例重新计算（派发更新），从而使它关联的组件重新渲染。

一句话总结：vuejs采用数据劫持结合发布-订阅模式，通过ObjectdefineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发响应的监听回调。

我的理解：在new Vue的时候，在Observer中通过ObjectdefineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图。而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定。

Vue实例从创建到销毁的全过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程。

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

它可以分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后。

第一次页面加载时会触发beforeCreate、created、beforeMounted、mounted

DOM渲染在mounted中就已经完成。

1、beforeCreate：可以在这加个loading事件，在加载实例时触发；

2、created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

3、mounted：挂载元素，获取DOM节点；

4、updated：如果对数据统一处理，在这里写上相应函数；

5、beforeDestroy：可以放一个确认停止事件的确认框；

6、nextTick：更新数据后立即 *** 作DOM。

1、对象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

2、数组方法v-bind:class="[class1, class2]"

3、行内v-bind:style="{color: color, fontSize: fontSize+'px'}"

1、router-link标签会渲染为标签，咋填template中的跳转都是这种；

2、另一种是编辑式导航，也就是通过js跳转比如routerpush('/home')

M- model ，model 表示数据模型，也可以在model中定义数据修改和 *** 作的业务逻辑

V- view，view表示视图，它负责将数据模型转换为视图展示出来

VM- viewmodel，viewmodel是一个同步view和model的对象，连接view和model，用于监听数据模型的改变和控制视图行为

computed：computed是计算属性，也就是计算值，更多用于计算值的场景。它具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算。

watch：watch更多的是观察作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据变化时用来执行回调进行后续 *** 作。它不具有缓存性，页面重新渲染时值不会变化也不会执行。

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，但是也得慎用，样式不易改变。

解决方法：

① 使用混合型的css样式，混合使用全局样式和私有样式。

② 深度作用选择器：如果你希望scoped样式中的一个选择器能够作用的更深，可以使用>>> *** 作符。如：<style scoped>a>>>b{/ /}</style>

一个元素绑定多个事件的写法有两种：

1、修饰符的使用

2、在method方法里分别写两个事件

Vue组件中的data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用，如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

原理：JS执行是单线程的，它是基于事件循环的。所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件。一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看那些对应的异步任务，等结束等待状态，进入执行栈，开始执行。主线程不断重复上面的步骤。主执行的执行过程就是tick，所有的异步结果都是通过任务队列来调度的。任务分为两大类：宏任务和微任务，宏任务包括：setTimeOut等，微任务包括promisethen。

Vue用异步队列的方式来控制DOM更新和nextTick回调先后执行。在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务和微任务，nextTick把要执行的任务推入一个队列中，在下一个tick同步执行队列的所有任务，它是异步任务中的微任务。如果我们在更新了一个响应式数据后，需要同步拿到这个渲染后的DOM结果，就使用nextTick方法，异步拿这个结果。

使用方式：

① this nextTickthen(cb); 异步

父组件调用子组件的方法

父组件： this$refsyeluosenchildMethod()

子组件向父组件传值并调用方法： $emit

组件之间： bus==$emit+$on

1、第一种方法是直接在子组件中通过this emit向父组件触发一个事件，父组件监听这个事件就行了。

3、第三种都可以实现子组件调用父组件的方法。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用，你可以简单的监控watch $route对象：

is用来动态切换组件，DOM模板解析

全局的：前置守卫、后置钩子（beforeEach、afterEach）beforeResolve

单个路由独享的：beforeEnter

组件级的：beforeRouteEnter（不能获取组件实例this）、beforeRouteUpdate、beforeRouteLeave

这是因为在执行路有钩子函数beforeRouteEnter的时候，组件还没有被创建出来，先执行beforeRouteEnter，再执行周期钩子函数beforeCreate，可以通过next获取组件的实例对象，如：next((vm) => {})，参数vm就是组件的实例化对象。

缺点：

优点：

计算属性是需要复杂的逻辑，可以用方法method代替。

vue-cli提供的脚手架模板有browserify和webpack。

① 是什么？

Vue框架中的状态管理，分别是State、Getter、Mutation、Action、Module。

② 怎么使用？

新建一个目录store。

③ 功能场景？

单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车等。

④ vuex的状态：

a State特性：vuex就是一个仓库，仓库里面放了很多对象，其中state就是数据源存放地，对应于一般Vue对象里面的data。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。它通过mapState把全局的state和getters映射到当前组件的computed计算属性中。

b Getter特性：getters可以对State进行计算 *** 作，它就是store的计算属性。虽然在组件内可以做计算属性，但是getters可以在多组件之间复用。如果一个状态只在一个组件内使用，可以不用getters。

c Mutation特性：改变store中state状态的唯一方法就是提交mutation，每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那我们需要执行一个相应的调用方法：storecommit。

d Action特性：类似于mutation，不同点在于：Action提交的是mutation，而不是直接变更状态。Action可以包含任意异步 *** 作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用contextcommit提交一个mutation。或者通过contextstate和contextgetters来获取state和getters。Action通过storedispatch方法触发：storedispatch('increment')。

e Module特性：Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分解为模块，每个模块中拥有自己的state、mutation、action和getter。

① 创建组件页面eg Toastvue

② 用Vueextend() 扩展一个组件构造器，再通过实例化组件构造器，就可以创造出可复用的组件。

③ 将toast组件挂载到新创建的div上；

④ 将toast组件的dom添加到body里；

⑤ 修改优化达到动态控制页面显示文字跟显示时间；

修饰符分为：一般修饰符、事件修饰符、按键、系统

① 一般修饰符：

② 事件修饰符

③ 按键修饰符

④ 系统修饰符（可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

在我看来，渐进式代表的含义是：主张最少。视图模板引擎每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：主张最少，没有多做职责之外的事。

以上就是关于vue-router 钩子函数 （beforeEach、afterEach、beforeEnter）全部的内容，包括:vue-router 钩子函数 （beforeEach、afterEach、beforeEnter）、vue-router 中的导航钩子、怎么实现从数据库中取出代码创建vue组件实例等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！