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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2609 天前的主题，其中的信息可能已经有所发展或是发生改变。

如图所示，下层（左边）是 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

2017-10-06 09:08:37 +08:00 via Android

这些参数基本很难精简了，建议配合短链接。

imydou

2017-10-06 11:07:16 +08:00

@loading #1 倒不是因为参数多，不能精简，是因为链接都需要拼参数，格外累

jin5354

2017-10-06 12:34:21 +08:00

如果要发给别人，那只能把状态放 url 上，没别的办法

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

2017-10-06 13:24:30 +08:00

或者直接使用 History API, window.history.pushState 什么的
https://developer.mozilla.org/en-US/docs/Web/API/History

imydou

2017-10-06 13:31:18 +08:00

@viko16 #4 两个 component 的参数需要区分开，除了把下层 component 的参数 json encode 没想到别的办法。