vue, ng 这些都喜欢在 URL 中用 # 号区分路由,和页面锚点也是 # 冲突,怎么办呢?

2019-06-18 22:24:44 +08:00
 liudaqi
也许是习惯的原因,看到 URL 中间夹个 # 感觉 URL 是要断掉了,/ 斜杠已经隔断了一层,# 再断一次,看起来不舒服
4252 次点击
所在节点    JavaScript
10 条回复
shintendo
2019-06-18 22:36:54 +08:00
不是它们“喜欢”,就是因为#是锚点才用它的。
因为 url 锚点后面的部分改变不会引起页面重新请求,这正是单页应用做前端路由需要的特性。
你想用常规 url 的话,可以用 History Mode,但就需要后端的配合。
anthoy
2019-06-18 22:40:45 +08:00
楼上对的,可以开启 History Mode 模式
reeco
2019-06-18 22:43:52 +08:00
有些场景下我已经不用前端路由了,全改为后端路由
learnshare
2019-06-18 22:45:26 +08:00
用 # 首先是为了改变 URL,方便借用浏览器的历史记录机制。
同时为了避免给服务器带来麻烦,因为通常服务器不支持单页应用,导致首页之外的路径 404。
以及需要避免浏览器对页面重新发起请求

当然也可以使用正常的路径,需要服务器做一些调整,页面刷新也可能会带来更多麻烦
liudaqi
2019-06-19 00:09:28 +08:00
@shintendo
@anthoy
@reeco
@learnshare

感谢!那如果要在 URL 中使用传统的锚点功能,是不是必须要修改后端路由的匹配方式?否则 两个 # 会导致后一个失效吧?
also24
2019-06-19 00:16:20 +08:00
@liudaqi #5 我直接搜索 『 vue 锚点』似乎可以搜到大量的解决方案啊?
binaryify
2019-06-19 08:34:46 +08:00
flowfire
2019-07-30 11:08:46 +08:00
可以使用 history api,目前几大框架都有可以配置使用
如果要考虑兼容性可以看这里 https://caniuse.com/#search=history
另外,后端兼容也简单。把 404 页面全部重定向到 index.html 就行了
flowfire
2019-07-30 11:09:45 +08:00
@liudaqi #5 如果我没记错的话锚点数据是不会被传递到服务器的。。
Sapp
2019-08-01 10:21:51 +08:00
@liudaqi 后端把所有页面请求(除了后端打算自己接管的)都转发到 / 去就行了,路由全部交给前端来处理,这样就不需要 # 了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/575279

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX