Skip to content

[vue] 切换路由时,需要保存草稿的功能,怎么实现呢? #417

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 切换路由时,需要保存草稿的功能,怎么实现呢?

Activity

wenyejie

wenyejie commented on Jun 27, 2019

@wenyejie

在beforeDestroy中加入check功能,
当检测到有草稿时, 自动保存到vuex或者storage中或者window中等等

但是我要说的是, 这种方法是不靠谱的, 如果我是刷新页面呢!
建议采用, 实施保存操作, 保存在storage中较为靠谱, 当然这种操作牺牲是比较多的

具体看业务场景

yalishizhude

yalishizhude commented on Jul 2, 2019

@yalishizhude

在beforeDestroy中加入check功能,
当检测到有草稿时, 自动保存到vuex或者storage中或者window中等等

但是我要说的是, 这种方法是不靠谱的, 如果我是刷新页面呢!
建议采用, 实施保存操作, 保存在storage中较为靠谱, 当然这种操作牺牲是比较多的

具体看业务场景

可以用beforeDestroy结合window.onbeforeunload解决性能问题

XSJXSJ111

XSJXSJ111 commented on Jul 2, 2019

@XSJXSJ111

用keep-alive缓存那个路由

wzzz90

wzzz90 commented on Aug 9, 2019

@wzzz90

beforeRouteLeave

lostimever

lostimever commented on Mar 9, 2020

@lostimever

你这题目想说明的是,切换路由时自动或提示保存草稿功能吗?
如果是这样

beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿,或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }

}
famingyuan

famingyuan commented on Oct 20, 2020

@famingyuan

面试如果要问这种问题,等于得背API

Drikold

Drikold commented on Jul 26, 2021

@Drikold

https://blog.csdn.net/loyd3/article/details/118188179

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @famingyuan@yalishizhude@wenyejie@haizhilin2013@Drikold

        Issue actions

          [vue] 切换路由时,需要保存草稿的功能,怎么实现呢? · Issue #417 · haizlin/fe-interview