Vue入坑——vue-router钩子函数

上一篇：vue-router别名alias

一块儿学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

开始学钩子函数以前，我有点不能理解这啥意思，后来我看了别人的小demo以后，有了一个初步理解，我以为应该能够举个例子，就好像咱们从接口拿数据分为几个阶段：发送请求、接收响应、处理数据...

钩子函数的话，就应该是执行路由以前，执行路由时，路由执行完了...这样好理解多了吧。

两种建立钩子的方法

（1）、路由配置文件中的钩子函数

a、在index.js里面写一个

这里咱们给hellovue组件写一个

b、用了一个es6的箭头函数，里面的参数分别是：

to：路由将要跳转的路径信息

from：路由跳转以前的路径信息

next：路由的控制，他的参数一般是false和true

c、点击一下这个跳转连接，看他给咱们打印什么出来

d、那个next（）干什么用的？

我来改改他的参数

看看页面有啥变化

下面的数据都不显示了？

看看打印

emmmm，打印正常。

哎，我发现点击了其余路由以后，再点击咱们设置了的这个路由，跳转不过来了。

我知道了，那个next（false）；会阻断路由的跳转。

这种写钩子函数的方式get到了，可是注意，他只能写一种，就是beforeEnter

（2）、组件中的钩子函数

第一种写钩子函数的方式，只能写beforeEnter，下面这种呢就能够写两种啦，不过写法有些不一样。

（1）、beforeRouteEnter

他叫做路由进入前的钩子函数，咱们来看看怎么写

a、在right.vue里写

    beforeRouteEnter:(to,from,next)=>{
      console.log("准备进入路由组件");
      console.log(to);
      console.log(from);
      next();
    }

总体：

b、运行看打印效果：

好啦，依葫芦画瓢，把beforeRouteLeave写了

 

好啦，钩子函数的写法咱们就知道啦，为之后实战打好基础！

——————————^~^我是萌萌哒分割线^~^————————————————

下一篇：