VueRouter导航至哈希路径时如何去除#符号？

你这是踩了个很常见的小细节坑——当前的router-link写法是主动指定了URL的哈希部分，这和你开启的history模式完全无关，所以URL里才会一直带着#about。下面给你一步步捋清楚解决方案：

1. 修正router-link的跳转写法 #

你现在用的:to="{ hash: 'about' }"是强制给URL加哈希后缀的写法。如果你的目标是跳转到/about路由页面，直接改成下面两种方式就行：

<!-- 推荐用路由名称跳转，后续路由路径修改时不用改这里 -->
<router-link :to="{ name: 'about' }">About us</router-link>

<!-- 也可以直接写路由路径 -->
<router-link to="/about">About us</router-link>

改完之后跳转的URL就会变成localhost:3000/about，完全没有多余的#符号。

2. 为什么之前的写法没效果？ #

你开启的mode: "history"只是让Vue Router不再使用哈希模式的路由前缀（也就是去掉原本的/#/），但如果你在router-link的to参数里主动设置了hash属性，Vue Router依然会在URL末尾加上对应的哈希值——这是网页锚点定位的标准行为，和路由模式本身没关系。

3. 如果是要跳转到页面内的锚点怎么办？ #

要是你原本的需求是跳转到About页面里的某个锚点元素（比如页面里有个id="about"的区块），那可以这么写：

<router-link :to="{ name: 'about', hash: '#about' }">About us</router-link>

此时URL会变成localhost:3000/about#about，这是页面内锚点的正常格式，而且你的scrollBehavior配置也会生效，自动平滑滚动到对应元素位置。

4. 确认Laravel配置没问题 #

你的web.php里的catch-all路由配置是正确的，已经覆盖了SPA history模式下刷新页面不会404的需求，这部分不用改。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov