美文网首页
如何在Vue组件中使用vue-router的钩子函数

如何在Vue组件中使用vue-router的钩子函数

作者: 会撸码的小马 | 来源:发表于2018-09-22 17:58 被阅读0次

今天发现需要在某些页面需要使用路由的钩子函数,但是发现加上去之前没有反应?

然后去翻了一下资料,so easy,附上代码:
在main.ts(因为我使用ts写的,所以在main.ts)或main.js里面加上钩子函数的注册就OK


import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])

如果发现import 报错,直接npm install vue-class-componentyarn add vue-class-component
然后在每个组件里面调用相应的路由钩子就可以:

beforeRouteLeave(to, from, next) {
    // ....
    next()
},
beforeRouteEnter(to, from, next) {
    // ....
    next()
},
beforeRouteUpdate(to, from, next) {
    // ....
    next()
},

相关文章

  • 2021-04-11

    vue-router 路由钩子函数(导航守卫) 路由钩子函数有三种: 全局钩子: beforeEach(全局前置守...

  • vue中的钩子函数(二)

    Vue钩子函数 在开发Vue组件时,钩子函数我们会经常用到,但是具体在什么时机,使用哪个钩子函数,会产生什么样的结...

  • 如何在Vue组件中使用vue-router的钩子函数

    今天发现需要在某些页面需要使用路由的钩子函数,但是发现加上去之前没有反应? 然后去翻了一下资料,so easy,附...

  • vue-router方法的记录

    记录一下vue-router中的路由钩子函数的基本用法 路由钩子函数分为三种类型如下: 第一种:全局钩子函数。 r...

  • VueCLI3打包优化--抽离依赖包

    项目开发中,使用了很多依赖包,如Vue、路由管理Vue-router、状态管理Vuex、UI组件库(Element...

  • vue-router路由守卫

    vue-router导航钩子 vue-router导航钩子的主要作用是拦截导航,让路由完成跳转或者取消; 导航钩子...

  • vue全家桶(2.7)

    3.11.1.vue-router中的全局钩子函数 在vue-router中,路由发生变化,我们可以做一些事情,例...

  • @面试题全部

    面试题第一天 1:vuex工作流程2:vue-router导航守卫(钩子函数)3:详述keep-alive组件 面...

  • Vue3.x中的生命周期和钩子函数(部分)

      Vue组件化编程中的生命周期,可以理解为组件在不同时间段能执行的不同的函数,这些函数也叫钩子函数。  钩子函数...

  • Vue笔记

    mint-ui vue生命周期钩子函数/beforeCreate 组件实例刚被创建,组件属性计算之前,如data属...

网友评论

      本文标题:如何在Vue组件中使用vue-router的钩子函数

      本文链接:https://www.haomeiwen.com/subject/ahexoftx.html