使用ts时vue组件内守卫beforeRouteLeave

前端之家收集整理的这篇文章主要介绍了使用ts时vue组件内守卫beforeRouteLeave前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目中有个页面需要用户离开时提示用户,否则会丢失一些数据,vue有个组件内的守卫刚好合适,先上官网例子:

const Foo = {
  template: `...`,beforeRouteEnter (to,from,next) {
    // 在渲染该组件的对应路由被 confirm 前调用
     不!能!获取组件实例 `this`
     因为当守卫执行前,组件实例还没被创建
  },beforeRouteUpdate (to,1)"> 在当前路由改变,但是该组件被复用时调用
     举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
     由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用
     可以访问组件实例 `this`
 导航离开该组件的对应路由时调用
     可以访问组件实例 `this`
    const answer = window.confirm('Do you really want to leave? you have     
      unsaved changes!')
    if (answer) {
       next()
    } else {
        next(false)
    }
  }
}    

看起来简洁明了,但是直接拿到项目中去,会发现没有触发,ps(项目用ts);

还需要在该组件加行代码

 import {Component,Vue} from 'vue-property-decorator';
  Component.registerHooks([
        'beforeRouteLeave',]);

 

猜你在找的Vue相关文章