Skip to content

[vue] 使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示 #2203

@haizhilin2013

Description

@haizhilin2013
Collaborator

使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示

我也要出题

Activity

liuyingbin19222

liuyingbin19222 commented on Apr 9, 2020

@liuyingbin19222
router.beforeEach((to, from, next) => {
     if(from.path == "...从某个页面跳转...") {
          if(confirm('编辑内容未保存,是否离开?')) {
              next()
          }else {
            next(false)
          }
            //1. next()  进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirm的
            //2. next('/') 或者next({path:'/'}) 跳转到一个不同的地址,当前的好行中断,然后进行一个新的导航
            //3. next(false) 中断当前的导航
    }else {
        next() 
    }
})
daiyoucheng

daiyoucheng commented on Aug 18, 2020

@daiyoucheng

在组件路由beforeRouterLeave中进行判断

lt846786463

lt846786463 commented on Oct 27, 2020

@lt846786463

watch() 监听数据变动

ferrinweb

ferrinweb commented on Nov 16, 2020

@ferrinweb

创建可编辑数据副本,如果有保存操作则更新副本。
在路由守卫钩子进行数据对比,如副本与原始数据不同,则给出 comfirm。

crush2020

crush2020 commented on Jan 20, 2021

@crush2020

使用watch监听数据的改变
newvalue:改变后的数据,oldvalue:改变前的数据
watch: {
name(newvalue, oldvalue) {
console.log(newvalue, oldvalue)
}
}

dengBox

dengBox commented on Jun 1, 2021

@dengBox

update钩子函数中设置flag,在beforeDestory根据flag进行弹框提示

sc950828

sc950828 commented on Sep 24, 2022

@sc950828

watch监听或者update监听都不严谨,有可能它改了又还原了。所以最好得把初始值保存起来,最后在beforeDestory中遍历比较。

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

        @ferrinweb@haizhilin2013@daiyoucheng@sc950828@liuyingbin19222

        Issue actions

          [vue] 使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示 · Issue #2203 · haizlin/fe-interview