vue-router中的路由钩子函数基本用法汇总

最近学习一下,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()
  }

原文地址:https://www.cnblogs.com/web-develper/p/11365432.html

时间: 2024-11-09 04:00:38

vue-router中的路由钩子函数基本用法汇总的相关文章

VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新dom后执行回调 二.$refs用法 1.ref作用于普通元素——得到dom节点 2.ref作用于子组件——得到组件实例,可使用组件所有方法 3.当v-for用于元素或组件的时候,refs将是包含dom节点或组件实例的数组(想得到单个的ref,只需循环即可) 三.vue组件hover事件模拟 1.m

vue组件级路由钩子函数介绍

正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 同样可以注册一个全局的 after 钩子,不过它不像 be

C++中rand()函数的用法

C++中rand()函数的用法   2011-12-30 11:03:59|  分类: C / C++|举报|字号 订阅 一.C++中不能使用random()函数 random函数不是ANSI C标准,不能在gcc,vc等编译器下编译通过.但在C语言中int random(num)可以这样使用,它返回的是0至num-1的一个随机数. 可改用C++下的rand函数来实现. 1.C++标准函数库提供一随机数生成器rand,返回0-RAND_MAX之间均匀分布的伪随机整数. RAND_MAX必须至少为

vue中钩子函数的用法

这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted: 在这发起后端请求,拿回数据,配合路由钩子做一些事情 beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容 当然,还有更多,继续探索中-- 原文地址:https://www.cnblogs.com/zr123/p

如何在Vue项目中给路由跳转加上进度条

1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst

Vue生命周期简介和钩子函数

钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字.或者说你想在出生阶段去约炮,也是不行的.组件也是一样,每个阶段它的内部构造是不一样的.所以一般特定的钩子做特定的事,比如ajax获取数据就可以在mounted阶段. 生命周期探究 对于执行顺序和什么时候执行,我们将结合代码去看看钩子函数的执行. <!DOCTYPE html> <html> <head> <title>钩子函数</title>

四、Vue Router 设置动态路由

动态路由配置 像/user/foo和/user/bar都映射到相同的路由.也就是说根据不同的ID,渲染相同的User组件.可以使用动态路径参数来达到这个效果. 动态路径参数使用冒号:标记,后面为参数的名称,参数会被设置到this.$route.params中. <script> // 匹配模式 /user/:username // 匹配到的路径为 /user/evan // $route.params 获取到的参数对象 { useranme: 'evan' } </script>

vue实例的生命周期 —— 钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. vue有8种生命周期函数: 钩子函数 触发的行为  在此阶段可以做的事情 beforeCreadted 在实例创建以前调用,没有实例化,数据访问不到 vue实例的挂载元素$el和数据对象data都为undefined,还未初始化.   加loading事件

vue的生命周期和钩子函数的理解

对于vue的生命周期,官方文档上并没有太多的文字性说明,把自己对生命周期和钩子函数的理解记录下来 官方文档 自己的理解 vue生命周期的概念:vue对象从被创建,到执行逻辑,最后到被销毁的过程. 具体流程: 1)vue实例的创建 2)初始化事件和生命周期 3)初始化data和methods 4)生成虚拟dom $el(将没有解析的指令的dom加载到内存中) 5)使用$el 来替代el,并且将$el中的指令进行解析 6)进行状态mounted的循环 判断data中的数据是否发生改变,如果改变,则跟