Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前言
网站链接中出现 #
(井号)是因为你的前端路由使用了 Hash 模式(hash mode),这是一种前端框架(如 Vue.js、React 等)中常用的路由策略。
为什么有 #
比如 https://www.zimeinew.com/#/order
:
- 井号
#
之后的是前端控制的路由路径,不是由后端服务器处理的路径。 - 它不会触发页面刷新,而是由前端路由框架(如 Vue Router)解析并动态切换视图。
背后的技术
你可能在用 Vue.js + Vue Router,并设置了:
const router = new VueRouter({mode: 'hash', // 默认就是 hash 模式routes: [...]
});
优点
- 部署简单,无需后端配合做 URL 重写(rewrite)
- 页面刷新不会找不到路由资源(避免 404)
缺点
- URL 不够美观
- 对 SEO 不太友好(虽然现在很多搜索引擎已支持)
想去掉 #
怎么办?
可以切换到 History 模式:
const router = new VueRouter({mode: 'history',routes: [...]
});
但 注意:使用 history 模式后,部署服务器要做 URL 重写(rewrite),否则用户刷新页面时会 404。
例如 Nginx 的配置:
location / {try_files $uri $uri/ /index.html;
}