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

vuejs 两个同级别 link-view 页面如何保持 query 参数

  •  
  •   imydou · 2017-10-06 08:46:20 +08:00 · 2247 次点击
    这是一个创建于 2388 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如图所示,下层(左边)是 view1,上层(右边)是 view2,是平级的。

    view1 带搜索,分页,url 有参数。

    举个例子:view1 翻到第二页,点击某条信息,view2 自动展开显示。期望下面的 view1 附带之前的参数,使页面保持之前的状态。

    目前尝试的实现方式是,在 view2 的链接上,用 json urlencode 保存 view1 的参数,总感觉很笨重。下面链接示例:

    http://127.0.0.1:8000/company/17/edit?company=%7B%22name%22%3A%22company%22,%22path%22%3A%22%2Fcompany%22,%22query%22%3A%7B%22page%22%3A2%7D%7D

    最终期望是,点开 view2 后,把链接发给别人,打开页面状态和我的一样,包括 view1 的分页或者搜索条件都在。

    麻烦有经验的朋友指点下,非常感谢!

    最后,国庆长假快乐!!

    6 条回复    2017-10-06 13:31:18 +08:00
    loading
        1
    loading  
       2017-10-06 09:08:37 +08:00 via Android   ❤️ 1
    这些参数基本很难精简了,建议配合短链接。
    imydou
        2
    imydou  
    OP
       2017-10-06 11:07:16 +08:00
    @loading #1 倒不是因为参数多,不能精简,是因为链接都需要拼参数,格外累
    jin5354
        3
    jin5354  
       2017-10-06 12:34:21 +08:00   ❤️ 1
    如果要发给别人,那只能把状态放 url 上,没别的办法
    viko16
        4
    viko16  
       2017-10-06 13:22:56 +08:00
    直接带参数就好,不必 JSON encode decode (否则会产生更多的模板字符串..

    你可能需要一个处理 query string 的方法集吧?
    https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
    viko16
        5
    viko16  
       2017-10-06 13:24:30 +08:00
    或者直接使用 History API, window.history.pushState 什么的
    https://developer.mozilla.org/en-US/docs/Web/API/History
    imydou
        6
    imydou  
    OP
       2017-10-06 13:31:18 +08:00
    @viko16 #4 两个 component 的参数需要区分开,除了把下层 component 的参数 json encode 没想到别的办法。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2579 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:28 · PVG 09:28 · LAX 18:28 · JFK 21:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.