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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

也许是习惯的原因，看到 URL 中间夹个 # 感觉 URL 是要断掉了，/ 斜杠已经隔断了一层，# 再断一次，看起来不舒服

url

分路由

号区

斜杠

10 条回复 • 2019-08-01 10:21:51 +08:00

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 via Android

有些场景下我已经不用前端路由了，全改为后端路由

learnshare

2019-06-18 22:45:26 +08:00

用 # 首先是为了改变 URL，方便借用浏览器的历史记录机制。
同时为了避免给服务器带来麻烦，因为通常服务器不支持单页应用，导致首页之外的路径 404。
以及需要避免浏览器对页面重新发起请求

当然也可以使用正常的路径，需要服务器做一些调整，页面刷新也可能会带来更多麻烦

liudaqi

2019-06-19 00:09:28 +08:00 via Android

@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 via iPhone

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

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 后端把所有页面请求（除了后端打算自己接管的）都转发到 / 去就行了，路由全部交给前端来处理，这样就不需要 # 了