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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
小程序实现密码输入框
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基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
js实现文字截断功能
2016/09/14 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python画环形图的方法
2020/03/25 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
心得体会范文
2014/01/04 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
php去除deprecated的实例方法
2021/11/17 PHP
Nginx跨域问题解析与解决
2022/08/05 Servers