加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

使用ts时vue组件内守卫beforeRouteLeave

发布时间:2020-12-16 23:11:13 所属栏目:百科 来源:网络整理
导读:项目中有个页面需要用户离开时提示用户,否则会丢失一些数据,vue有个组件内的守卫刚好合适,先上官网例子: const Foo = { template: `...`,beforeRouteEnter (to,from,next) { // 在渲染该组件的对应路由被 confirm 前调用 不!能!获取组件实例 `this` 因

项目中有个页面需要用户离开时提示用户,否则会丢失一些数据,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',]);

?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读