Vue里面提供的三大类钩子及两种函数
时间:2019-11-04
本文章向大家介绍Vue里面提供的三大类钩子及两种函数,主要包括Vue里面提供的三大类钩子及两种函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
总体来讲vue里面提供了三大类钩子,两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子
两种函数:
1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
2.Vue.afterEach(function(to,form))/*在跳转之后判断*/
全局钩子函数
顾名思义,它是对全局有效的一个函数
1
2
3
4
5
6
|
router.beforeEach((to, from, next) => { let token = router.app.$storage.fetch("token"); let needAuth = to.matched.some(item => item.meta.login); if(!token && needAuth) return next({path: "/login"}); next(); }); |
beforeEach函数有三个参数:
- to:router即将进入的路由对象
- from:当前导航即将离开的路由
- next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
afterEach函数不用传next()函数
某个路由的钩子函数
顾名思义,它是写在某个路由里头的函数,本质上跟组件内函数没有区别。
const router = new VueRouter({ routes: [ { path: '/login', component: Login, beforeEnter: (to, from, next) => { // ... }, beforeLeave: (to, from, next) => { // ... } } ] })
路由组件的钩子
注意:这里说的是路由组件!
路由组件 属于 组件,但组件 不等同于 路由组件!所谓的路由组件:直接定义在router中component处的组件。如:
var routes = [ { path:'/home', component:home, name:"home" } ]
在子组件中调用路由的钩子函数时无效的。
在官方文档上是这样定义的:
可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
这里简单说下钩子函数的用法:它是和data,methods平级的。
beforeRouteLeave(to, from, next) { next() }, beforeRouteEnter(to, from, next) { next() }, beforeRouteUpdate(to, from, next) { next() }, data:{}, method: {}
原文地址:https://www.cnblogs.com/xzybk/p/11791513.html
- Flash/Flex学习笔记(27):摄像头/麦克风的视频/音量指示器
- Flash/Flex学习笔记(26):AS3自定义右键菜单
- Python27中Json对中文的处理
- Python在VSCode中进入交互界面调试
- CentOS7下单机部署RabbltMQ环境的操作记录
- Flash/Flex学习笔记(24):粒子效果
- 针对业务日志的监控报警设置
- 对广晟有色的数据分析
- Flash/Flex学习笔记(22):滤镜学习
- Python输出信息
- Flash/Flex学习笔记(21):利用colorTransform改变对象的颜色及透明度
- 网站访问状态和超时时间监控报警设置
- 为treeview添加客户端事件
- Flash/Flex学习笔记(20):贝塞尔曲线
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaWeb - Servlet:重定向和转发,状态管理
- 设计模式(12)[JS版]--JavaScript必会设计模式之外观模式(Façade Pattern)
- JavaWeb - JSP:概述和语法,内置对象,JavaBean 组件,MVC 设计模式
- kill -9 导致 Kakfa 重启失败的惨痛经历!
- 图解 DataX 核心设计原理
- 不会吧不会吧,你不会还不知道这些提高JS代码质量的骚操作吧?
- Flask架站基础篇(一)--环境配置
- Flask架站基础篇(三)--Flask生成文件内容和文件夹详解
- Flask架站基础篇(四)--URL
- Flask架站基础篇(六)--mysql-python 安装
- Flask架站基础篇(五)----Jinja2模板
- Flask架站基础篇(七)--SQLAlchemy(1)
- JavaScript 进阶教程(1)--面向对象编程
- Flask架站基础篇(八)--SQLAlchemy(2)
- JavaWeb - EL and JSTL