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 钩子函数的初接触的更多相关文章

  1. vue 钩子函数 使用async await

    示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  3. Vue钩子函数

    Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...

  4. vue 钩子函数的使用

    1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...

  5. vue 钩子函数

    beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...

  6. vue钩子函数的妙用之“created()和activated()”

    一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...

  7. vue 钩子函数中获取不到DOM节点

    原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...

  8. VUE钩子函数created与mounted区别

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.

  9. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

随机推荐

  1. 015-命令行下载安装brew

    一.brew 1.安装Homebrew 安装命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...

  2. 算法习题---3.11换抵挡装置(UVa1588)

    一:题目 给你连个长度分别为n1,n2且每列高度只为1或2的长条,然后将他们拼在一起,高度不能超过3,问他们拼在一起的最短长度 二:实现思路 1.获取主动轮和从动轮的数据. 2.主动轮不动,从动轮从左 ...

  3. C#如何控制panel加载的字窗体中控件的位置随着显示器分辨率大小而改变

    System.Windows.Forms.Screen   screen=Screen.PrimaryScreen;     System.Drawing.Rectangle   rct=screen ...

  4. Tools - Nmap

    Nmap Homepage Nmap参考指南(Man Page) Nmap中文网 wiki - Nmap 常用示例 1) Ping扫描,打印出对扫描做出响应的主机 nmap -sP 192.168.1 ...

  5. 100道iOS面试题

    面试题: 1__weak什么时候用 想要在block内部变外部变量需要加__weak或者__block 2.是否使用过coreImage和coreText?如果使用过,说说你的体验(答案在另一份) 3 ...

  6. iOS技术面试07:第三方框架

    1ios框架分为:cocoa Touch:UIKit.Foundation.附属框架 Media:OpenGL ES.EAGL.Quartz.Core Animation.Core Audio.    ...

  7. sql server 全角与半角字符转换

      /****** SQL转换全角/半角函数 开始******/CREATE FUNCTION ConvertWordAngle ( @str NVARCHAR(4000), --要转换的字符串 @f ...

  8. ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法

    这个是非常常用的案例,ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法/** * 单文件上传 * name:表单上传文件的名字 * ext: 文件允许的后缀,字符串形式 * path:文件保 ...

  9. webstorm2017中添加git

    1.pc中先安装git 2.在webstorm中选择VCS -> Checkout from Version Control -> Git Git Repository URL:  [gi ...

  10. C语言获取当前系统时间

    原文链接:https://blog.csdn.net/yuec1998/article/details/79883318 #include<stdio.h>#include<time ...