Vue使用路由钩子拦截器beforeEach和afterEach监听路由


Posted in Javascript onNovember 16, 2020

在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue里面提供了三大类钩子,两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子

两种函数:

1. router.beforeEach(function(to,form,next){}) /*在跳转之前执行*/

2. router.afterEach(function(to,form)}{}) /*在跳转之后判断*/

全局钩子函数

顾名思义,它是对全局有效的一个函数

// router.jsconst router = new Router({
 routes: [
  {
   path: '/',
   name: 'sideBar',
   component: sideBar,
   children:[
    {
     path:'/',
     name:'sort',
     component:sort
    },
    {
     path:'/addNewSort',
     name:'addNewSort',
     component:addNewSort
    },
    {
     path:'/notSend',
     name:'notSend',
     component:notSend
    },
    {
     path:'/sended',
     name:'sended',
     component:sended
    },
  }
 ]
})

router.beforeEach((to,from,next)=>{
 // console.log("to:",to);   // router即将进入的路由对象
 // console.log("from:",from); // 当前导航即将离开的路由
 // console.log("next:",next); // Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
 if(to.name=='notSend'){
  next({
   name:'sort'
  })
  return
 }
 next()
})

export default router

某个路由的钩子函数

顾名思义,它是写在某个路由里头的函数,本质上跟组件内函数没有区别。

// router.jsconst router = new VueRouter({
 routes: [
  {
   path: '/login',
   component: Login,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

路由组件的钩子

可以在路由组件内直接定义以下路由导航钩子

// *.vuebeforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

这里简单说下钩子函数的用法:它是和data,methods平级的。

beforeRouteLeave(to, from, next) {
  next()
},
beforeRouteEnter(to, from, next) {
  next()
},
beforeRouteUpdate(to, from, next) { // 用于相同路由组件的的参数更新
  next()
},
data:{},
method: {}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
详解vue axios中文文档
Sep 12 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
小程序云开发之用户注册登录
May 18 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
小程序实现密码输入框
Nov 16 #Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 #Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
You might like
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
JavaScript触发器详解
2007/03/10 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python使用装饰器进行django开发实例代码
2018/02/06 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
优秀食品类广告词
2014/03/19 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
人大调研汇报材料
2014/08/14 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
幼儿园辞职信
2015/05/13 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android