vue钩子
全局钩子
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => { // ... })
钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直处于 等待中。
next: Function
: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
确保要调用 next 方法,否则钩子就不会被 resolved。
router.afterEach(route => { // ... }) //没有 next 方法,不能改变导航:
某个路由独享的钩子
routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]
组件内的钩子
beforeRouteEnter(to, from, next) // 钩子不能访问 this,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
beforeRouteUpdate(to, from, next) (2.2 新增) //该组件被复用时调用
beforeRouteLeave(to, from, next) //导航离开该组件的对应路由时调用,可以访问组件实例this
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }
通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
vue钩子的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- vue钩子生命周期
1.beforeCreate // 组件实例刚刚被创建2.created // 实例已经创建完成3.beforeMount // 模板编译之 ...
- vue 钩子函数
beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- vue 钩子
生命周期总结 这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loadin ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
随机推荐
- python学习笔记(六)---文件操作与异常处理机制
文件读取 读取整个文件 要读取文件,需要一个包含几行文本的文件.下面首先来创建一个文件,它包含精确到小数点后30位的圆周率值,且在小数点后每10位处都换行: pi_digits.txt 3.14159 ...
- 关于宝塔下的项目中的php不能访问的问题
遇到的问题是访问项目根目录的所有php文件都是报404错,而其他文件则可以,比如txt,最后查资料发现 在宝塔运行网站的时候会在项目的根目录自动生成一个.user.ini文件,这个文件主要是防止对指定 ...
- 深入理解BIO、NIO、AIO
导读:本文你将获取到:同/异步 + 阻/非阻塞的性能区别:BIO.NIO.AIO 的区别:理解和实现 NIO 操作 Socket 时的多路复用:同时掌握 IO 最底层最核心的操作技巧. BIO.NIO ...
- myod实验(选做)
myod实验 实验任务 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Makefile ...
- python学习20之面向对象编程高级
'''''''''1.动态绑定:对于一个类,我们可以对它的实例动态绑定新的属性或方法.为了使所有的实例均可以使用动态绑定的属性和方法,我们也可以采用对类直接动态绑定'''class Student() ...
- python学习10字典
'''''''''字典(Dict)是python语言的一个最大的特征1.定义:是可变的无序集合,以键值对为基本元素,可以存储各种数据类型2.表示:{} 列表:[] 元组 () 字符串 ‘’ “” ‘‘ ...
- Linux网络服务第五章NFS共享服务
1.笔记 NFS一般用在局域网中,网络文件系统c/s格式 服务端s:设置一个共享目录 客户端c:挂载使用这个共享目录 rpc:111远程过程调用机制 Showmount -e:查看共享目录信息 def ...
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- 关于LinearLayout设置权重后width或height不设置0dp的影响说明
摘要 平时没那么注意LinearLayout布局时权重的问题,设置了权重属性后,通常建议将width或height的属性值设置为0dp,有时候设置权重后,还是习惯将width或height的属性设置为 ...