vue 钩子函数的初接触
vue-router的路由钩子函数:
第一种:全局钩子函数。
router.beforeEach((to, from, next) => {
console.log('beforeEach')
//next() //如果要跳转的话,一定要写上next()
//next(false) //取消了导航
next() //正常跳转,不写的话,不会跳转
})
router.afterEach((to, from) => { // 举例: 通过跳转后改变document.title
if( to.meta.title ){
window.document.title = to.meta.title //每个路由下title
}else{
window.document.title = '默认的title'
}
})
第二种:针对单个路由钩子函数
beforeEnter(to, from, next){
console.log('beforeEnter')
next() //正常跳转,不写的话,不会跳转
}
第三种:组件级钩子函数
beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行,所以this实例还没有创建出来
console.log("beforeRouteEnter")
console.log(this) //这时this还是undefinde,因为这个时候this实例还没有创建出来
next((vm) => { //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了
vm.text = '改变了'
})
},
beforeRouteUpdate(to, from, next){//可以解决二级导航时,页面只渲染一次的问题,也就是导航是否更新了,是否需要更新
console.log('beforeRouteUpdate')
next();
},
beforeRouteLeave(to, from, next){// 当离开组件时,是否允许离开
next()
}
vue 钩子函数的初接触的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- vue 钩子函数
beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...
- vue钩子函数的妙用之“created()和activated()”
一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- VUE钩子函数created与mounted区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
随机推荐
- 015-命令行下载安装brew
一.brew 1.安装Homebrew 安装命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...
- 算法习题---3.11换抵挡装置(UVa1588)
一:题目 给你连个长度分别为n1,n2且每列高度只为1或2的长条,然后将他们拼在一起,高度不能超过3,问他们拼在一起的最短长度 二:实现思路 1.获取主动轮和从动轮的数据. 2.主动轮不动,从动轮从左 ...
- C#如何控制panel加载的字窗体中控件的位置随着显示器分辨率大小而改变
System.Windows.Forms.Screen screen=Screen.PrimaryScreen; System.Drawing.Rectangle rct=screen ...
- Tools - Nmap
Nmap Homepage Nmap参考指南(Man Page) Nmap中文网 wiki - Nmap 常用示例 1) Ping扫描,打印出对扫描做出响应的主机 nmap -sP 192.168.1 ...
- 100道iOS面试题
面试题: 1__weak什么时候用 想要在block内部变外部变量需要加__weak或者__block 2.是否使用过coreImage和coreText?如果使用过,说说你的体验(答案在另一份) 3 ...
- iOS技术面试07:第三方框架
1ios框架分为:cocoa Touch:UIKit.Foundation.附属框架 Media:OpenGL ES.EAGL.Quartz.Core Animation.Core Audio. ...
- sql server 全角与半角字符转换
/****** SQL转换全角/半角函数 开始******/CREATE FUNCTION ConvertWordAngle ( @str NVARCHAR(4000), --要转换的字符串 @f ...
- ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法
这个是非常常用的案例,ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法/** * 单文件上传 * name:表单上传文件的名字 * ext: 文件允许的后缀,字符串形式 * path:文件保 ...
- webstorm2017中添加git
1.pc中先安装git 2.在webstorm中选择VCS -> Checkout from Version Control -> Git Git Repository URL: [gi ...
- C语言获取当前系统时间
原文链接:https://blog.csdn.net/yuec1998/article/details/79883318 #include<stdio.h>#include<time ...