美文网首页
如何在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()
    },
    

    相关文章

      网友评论

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

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