接上一篇,我们一起学习了vue路由的基本使用以及动态路由、路由嵌套以及路由命名等知识,今天我们一起来学习记录vue-router的钩子函数实现路由守卫;

  何为路由守卫?路由守卫有点类似于ajax的请求拦截器,就是请求发送之前先给你拦截住做一些事情之后再去发送请求,同样这里的路由守卫意思差不多;简单理解为就是你在进路由之前,首先把你拦住,对你进行检查;这是不是有点中学门口的保安?进来之前拦住,有学生证就进,没有学生证就不让进;当然,路由守卫不仅仅只是在你进入之前拦住你,还有其他的钩子函数进行其他操作;

  vue-router一共给我们提供了三大类钩子函数来实现路由守卫:

    1、全局钩子函数(beforeEach、afterEach)

    2、路由独享的钩子函数(beforeEnter)

    3、组件内钩子函数(beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave)

  首先我们先来看一下全局钩子函数:

    全局钩子函数:

    beforeEach:

      beforeEach一共接收三个参数,分别是to、from、next;to:即将进入的路由对象;from:正要离开的路由对象;next:路由的控制参数;

      next一共有四种调用方式:

      next():一切正常调用这个方法进入下一个钩子;

      next(false):取消路由导航,这时的url显示的是正要离开的路由地址;

      next('/login'):当前路由被终止,进入一个新的路由导航(路由地址可以自由指定)

      next(error):路由导航终止并且错误会被传递到router.onError()注册过的回调中;

    我们一般是用全局钩子来控制权限,像什么进页面没有登录就跳登录页,需要用户达到什么级别才能访问当前页面都是属于页面权限控制,都是可以通过beforeEach钩子函数来实现:

  main.js(全局钩子函数我们一般是在main.js中进行书写):

  1. // 进入路由前方法勾子
  2. router.beforeEach((to, from, next) => {
  3. console.log(to, '前置第一个参数')
  4. console.log(from, '前置第二个参数')
  5. console.log(next, '前置第三个参数')
  6. /
  7. to 目标路由
  8. from 源路由
  9. next 跳转到下一个路由
  10. */
  11. //这里暂时用local、storange来简单模拟验证权限
  12. if (window.localstorange.getItem("token")) {
  13. // 如果存在,则直接跳转到对应路由
  14. next();
  15. } else {
  16. // 如果不存在,则跳转到登录页
  17. next('/login');
  18. }
  19. });

    AfterEach:

      AfterEach和beforeEach一样都是属于全局守卫钩子,都是在main.js中进行调用;其中AfterEach比beforeEach少一个next参数;

      to:即将要进入的路由对象;

      from:正要离开的路由对象;

      afterEach()我们一般用来重置页面滚动条位置:

      假如我们有一个页面很长,滚动后其中的某个位置后跳转,这时新的页面的滚动条位置就会在上一个页面停留的位置;这个时候我们就可以利用afterEach进行重置:

  1. //全局路由改变后钩子
  2. router.afterEach((to, from) => {
  3. //将滚动条恢复到最顶端
  4. window.scrollTo(0, 0);
  5. })

  路由独享的钩子函数:

    beforeEneter:

      路由独享顾名思义就是指定的路由才有这些钩子函数,通常这类路由独享的钩子函数我们是在路由配置文件中进行配置,只能设置改变前的钩子,不能设置改变后的钩子

  1. const router=new VueRouter({
  2. routes
  3. });
  4. const routes=[
  5. {
  6. path:'/page1',
  7. component:page1,
  8. children: [
  9. {
  10. path: "phone",
  11. component: phone
  12. },
  13. {
  14. path: "computer",
  15. component: computer
  16. },
  17. ],
  18. //路由独享的钩子函数
  19. beforeEnter:(to,from,next)=>{
  20. console.log(to);
  21. console.log(from);
  22. next(false);
  23. }
  24. },

  上述代码理解为只有进入/page1才会触发beforeEnter这个钩子,如果进入其他页面,是不触发的;

  组件内的钩子函数:

    beforeRouteEnter(to,from,next):

    在路由进入前调用,因为此时的vue实例还没有创建,所以beforeEnter是唯一一个不能使用this的钩子函数;

      to:即将要进入的路由对象;

    from:正要离开的路由对象;

    next:路由控制参数

    beforeRouteUpdate(to,from,next):

    在路由发生修改的时候进行调用,比如我们上一篇文章讲到的动态路由传参,这种情况我们的beforeRouteUpdate也是会被调用的;

     to:即将要进入的路由对象;

     from:正要离开的路由对象;

     next:路由控制参数;

    beforeRouteLeave(to,from,next):

    在路由离开该组件时调用;

    

     to:即将要进入的路由对象;

     from:正要离开的路由对象;

     next:路由控制参数

注意:beforeRouteEnter因为触发的时候vue实例还没有创建,所以这个钩子函数中不能使用this,而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的,因为当这两个函数触发的时候实例都已经被创建了;

  当调用组件内的钩子函数的时候,我们通常是在组件内部进行调用,举个例子:

  1. <template>
  2. <div>
  3. <h1 id="h1">主页</h1>
  4. <p>
  5. <router-link to="/page1/phone">手机</router-link>
  6. <router-link to="/page1/computer">电脑</router-link>
  7. </p>
  8. <router-view></router-view>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. //路由进入前调用
  14. beforeRouteEnter (to, from, next) {
  15. window.document.title = "欢迎";
  16. next();
  17. },
  18. //路由修改时调用
  19. beforeRouteUpdate(to,from,next){
  20.  
  21. },
  22. //路由离开时调用
  23. beforeRouteLeave(to,from,next){
  24.  
  25. },
  26. data () {
  27. return {
  28. msg: "我是page1组件"
  29. }
  30. },
  31. }
  32. </script>

 

vue-router钩子函数实现路由守卫的更多相关文章

  1. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  2. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  3. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  4. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  5. vue - 过滤器-钩子函数路由

    一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...

  6. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  7. vue的生命周期和路由守卫

    组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed   还有 ...

  8. vue-(过滤器,钩子函数,路由)

    1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...

  9. vue学习(9)-路由守卫

    全局守卫 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... })   router.beforeEach(( ...

随机推荐

  1. jjyq app登录接口报:“内容类型不支持”???已解决

    1.在 app上进行登录操作,成功. 2.通过fiddler抓包得到jjyq登录接口的url.param.header. 3.在pycharm中使用requests发起请求,运行报错:内容类型不支持?

  2. 【redis】redis基础命令学习集合

    写在前面 Redis是一个高速的内存数据库,它的应用十分广泛,可以说是服务端必学必精的东西.然而,学以致用,无用则无为.学了的东西必须反复的去用,去实践,方能有真知.这篇文章记录了我在redis学习过 ...

  3. WebSocket实现数据库更新前台实时显示

    通过一个小实例来实现数据库更新后,推送消息给前台,让前台进行相应操作. 需求 数据库更新之后服务器推送消息给前台,让前台做操作.(数据库的数据不是由服务器写入的) 实现的话说到底都是用轮询,因为数据库 ...

  4. Codeforces 697D

    题意略. 思路: 对于随机产生的一个数列,对于某个儿子,其兄弟在其前面的概率为 1 / 2. 所以这个兄弟对期望的贡献为son[v] / 2,所有兄弟加起来即为(tot - 1) / 2. 详见代码: ...

  5. 你真的了解Mybatis的${}和#{}吗?是否了解应用场景?

    转自:https://www.cnblogs.com/mytzq/p/9321526.html 动态sql是mybatis的主要特性之一.在mapper中定义的参数传到xml中之后,在查询之前myba ...

  6. CodeForces - 632E Thief in a Shop 完全背包

    632E:http://codeforces.com/problemset/problem/632/E 参考:https://blog.csdn.net/qq_21057881/article/det ...

  7. Codeforces Round #480 (Div. 2) A. Links and Pearls

    题目地址:http://codeforces.com/contest/980/problem/A 官方题解: 我的理解:o表示珍珠,-表示链子,给一串字符串你可以任意重组这条项链(不能删去),判断这条 ...

  8. Codeforces Round #582 (Div. 3)

    题目链接:https://codeforces.com/contest/1213 A: 题意:给定数的位置,位置为整数,每个数可以向左或右移动一格或者两格,移动一格花费一个硬币,两格不花费硬币,问所有 ...

  9. 【Nginx】实现负载均衡的几种方式

    要理解负载均衡,必须先搞清楚正向代理和反向代理. 注: 正向代理,代理的是用户. 反向代理,代理的是服务器 什么是负载均衡 当一台服务器的单位时间内的访问量越大时,服务器压力就越大,大到超过自身承受能 ...

  10. 使用FreePBX和第三方线路对接

    首先搭建好相关环境 在FreePBX的web-gui控制界面进行操作. 通信接口连接--->中继  先创建一条中继线路: 创建中继 设置这条线路 优先级为0 中继名: 设置一个名字 Outgoi ...