V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
IdJoel
V2EX  ›  Vue.js

如何实现 vue 实现 tab 切换页面内容 保存用户输入的内容

  •  
  •   IdJoel · 2019-08-22 11:36:38 +08:00 · 5849 次点击
    这是一个创建于 1926 天前的主题,其中的信息可能已经有所发展或是发生改变。

    接到一个需求 要我去做一个 tab 切换页面的功能 需求是这样说的:

    如果用户在 a 页面添写一些表单,同时要查看 b 页面,希望能在同一个 url 下进行切换,切换后 a 页面输入的数据依旧存在,且可以随时切换。

    我的思路是去拿页面的模版,进行页面上的替换 但是这样就会遇到一个问题

    如果用户刷新页面,那刷新的是当前页面,可是我好像没办法阻止浏览器默认的刷新事件。能保证 a 页面的表单不被清空,请教一下大佬我该如何实现该功能。

    10 条回复    2019-08-22 17:43:38 +08:00
    nwu2Cv8OZ2MZMg39
        1
    nwu2Cv8OZ2MZMg39  
       2019-08-22 11:39:24 +08:00
    keep-alive
    m939594960
        2
    m939594960  
       2019-08-22 11:40:02 +08:00
    {current_tab:"a_data",a_data:{"name":2},b_data:{"name":2}}
    biabia123456
        3
    biabia123456  
       2019-08-22 11:40:27 +08:00
    keep-alive +1 冻结之前的页面 会多一个生命周期为 activated
    m939594960
        4
    m939594960  
       2019-08-22 11:41:08 +08:00
    watch:(a_data){ localstorage['a_data']=a_data }
    mikoshu
        5
    mikoshu  
       2019-08-22 11:41:10 +08:00
    keep-alive 完美解决
    biabia123456
        6
    biabia123456  
       2019-08-22 11:41:42 +08:00
    如果要实现用户刷新页面 那就只有数据存下来然后回填了
    T3RRY
        7
    T3RRY  
       2019-08-22 11:47:25 +08:00
    学到了
    gzlock
        8
    gzlock  
       2019-08-22 11:49:31 +08:00 via Android
    使用 onbeforeunload 事件在网页关闭 /刷新前提示用户会丢失数据
    在父组件或 vuex 存数据
    4 楼的做法可以更进一步,使用 computed 将整个表单数据使用 localstorage 存与取
    moxiaonai
        9
    moxiaonai  
       2019-08-22 12:00:01 +08:00 via Android
    keep – alive, vuex 都可以
    X37B
        10
    X37B  
       2019-08-22 17:43:38 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2939 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:30 · PVG 11:30 · LAX 19:30 · JFK 22:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.