IdJoel
V2EX  ›  Vue.js

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

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