IdJoel
V2EX  ›  Vue.js

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

  •  
  •   IdJoel · Aug 22, 2019 · 6878 views
    This topic created in 2638 days ago, the information mentioned may be changed or developed.

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

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

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

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

    10 replies  •  2019-08-22 17:43:38 +08:00
    nwu2Cv8OZ2MZMg39
    nwu2Cv8OZ2MZMg39
    Aug 22, 2019
    1
    keep-alive
    m939594960
    m939594960
    Aug 22, 2019
    2
    {current_tab:"a_data",a_data:{"name":2},b_data:{"name":2}}
    biabia123456
    biabia123456
    Aug 22, 2019
    3
    keep-alive +1 冻结之前的页面 会多一个生命周期为 activated
    m939594960
    m939594960
    Aug 22, 2019
    4
    watch:(a_data){ localstorage['a_data']=a_data }
    mikoshu
    mikoshu
    Aug 22, 2019
    5
    keep-alive 完美解决
    biabia123456
    biabia123456
    Aug 22, 2019
    6
    如果要实现用户刷新页面 那就只有数据存下来然后回填了
    T3RRY
    T3RRY
    Aug 22, 2019
    7
    学到了
    gzlock
    gzlock
    Aug 22, 2019 via Android
    8
    使用 onbeforeunload 事件在网页关闭 /刷新前提示用户会丢失数据
    在父组件或 vuex 存数据
    4 楼的做法可以更进一步,使用 computed 将整个表单数据使用 localstorage 存与取
    moxiaonai
    moxiaonai
    Aug 22, 2019 via Android
    9
    keep – alive, vuex 都可以
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1132 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 23:28 · PVG 07:28 · LAX 15:28 · JFK 18:28
    ♥ Do have faith in what you're doing.