请教一个 iOS NSURL 与前端路由的问题

let url = URL(string: "https://www.abc.com?id=123")
let url2 = URL(string: "https://www.abc.com/#/home?id=123")

url?.query	//id=123
url2?.query	//nil

  ///   foo://example.com:8042/over/there?name=ferret#nose
  ///   \_/   \______________/\_________/ \_________/ \__/
  ///    |           |            |            |        |
  ///  scheme     authority       path        query   fragment

稍微看了 URL 的文档，这个没有取到 query 应该是链接不符合 RPC3896 协议导致取 query 失败。如果讲 #/home 路由放到链接的最后面，是可以成功的。有个疑问是像 url2 这种形式的链接只能另写一套解析 query 和路由的方法吗？

query

URL

url2

路由

9 replies • 2019-08-02 16:00:35 +08:00

Lax

Aug 2, 2019

与 RFC 冲突基本无解，要不然就自己维护一套奇怪的规则。
最好是在遵循 RFC 的前提下去构造 URL，而不是在解析时搞黑科技。

dorentus

Aug 2, 2019

确实如你所说，query 取不到因为 url2 根本就没有 query，只有一个 fragment: "/home?id=123"

对前端也是如此，比如在浏览器或者 node.js 里面：

let url = new URL("https://www.abc.com/#/home?id=123")
url.search // => ""
url.hash // => "#/home?id=123"

前端框架也应该是自己去解析的

hauibojek

Aug 2, 2019

```
let characters = "#"
var allowedSet = CharacterSet.urlQueryAllowed
allowedSet.remove(charactersIn: characters)
var str = "https://www.abc.com/#/home?id=123"
str = str.addingPercentEncoding(withAllowedCharacters: allowedSet) ?? str
let url = URL(string: str)
print(url?.query) // Optional("id=123")
```

acumen

Aug 2, 2019

@dorentus #2 所以各自需要写解析的规则？这样的话为了兼容需要做比较多的 tracky 的方法
@Lax #1 构造出遮掩这样的 url 的原因是前端使用 vue-router 的 hash 路由，并且在 url 上使用 query 传递参数。或者是是不是 vue-router 是不是有规范，不太懂前端哎。

应该也有人会遇到这样的问题吧？想知道有没有比较好的解决方案？甚至是前端与 native 交互的整体架构

acumen

Aug 2, 2019

@hauibojek 感谢，这样是可以取到 query 的，但是路由又取不到了。比如我想在 url 上更新 id 的值，需要获取 url 的路由和 query 之后手动更新，再拼接

Lax

Aug 2, 2019

先去完整 URL 的 .fragment 得到 ‘/home?id=123 ’，再用后者构造另一个 URL 取 .query。两行代码

acumen

Aug 2, 2019

@Lax emmm，这样是可以取到 query，路由 route 我用后者的 path ？，还需要再次拼接好 url。可以是可以，但是感觉比较 tricky

xi_lin

Aug 2, 2019

前端为了单页面模式下不刷新，只能用 hash mode 了。其实现在也可以用 history api
一定是 hash mode 的话，你这边截断处理再拼回去吧

Lax

Aug 2, 2019

@acumen 前端 vue-router 用 hash 模式的话，我上面的做法在逻辑上是保持一致的。hash 模式只使用 # 后的内容来路由