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

2018-09-22  本文已影响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()
},
上一篇 下一篇

猜你喜欢

热点阅读