Vue开发网站会有“#”原因是前端路由使用了 Hash 模式

前言

网站链接中出现 #(井号)是因为你的前端路由使用了 Hash 模式(hash mode),这是一种前端框架(如 Vue.js、React 等)中常用的路由策略。


为什么有 #

比如 https://www.zimeinew.com/#/order

  • 井号 # 之后的是前端控制的路由路径,不是由后端服务器处理的路径。
  • 它不会触发页面刷新,而是由前端路由框架(如 Vue Router)解析并动态切换视图。

背后的技术

你可能在用 Vue.js + Vue Router,并设置了:

js 复制代码
const router = new VueRouter({
  mode: 'hash', // 默认就是 hash 模式
  routes: [...]
});

优点

  • 部署简单,无需后端配合做 URL 重写(rewrite)
  • 页面刷新不会找不到路由资源(避免 404)

缺点

  • URL 不够美观
  • 对 SEO 不太友好(虽然现在很多搜索引擎已支持)

想去掉 # 怎么办?

可以切换到 History 模式

js 复制代码
const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

注意 :使用 history 模式后,部署服务器要做 URL 重写(rewrite),否则用户刷新页面时会 404。

例如 Nginx 的配置:

nginx 复制代码
location / {
  try_files $uri $uri/ /index.html;
}
相关推荐
亿元程序员1 分钟前
为什么Cocos都4.0了还有人用2.x?
前端
MomentYY7 分钟前
AI 到底是“懂”,还是在“猜”?
前端·人工智能·ai编程
鹏毓网络科技9 分钟前
Cursor Rules 文件配置实战:3 个隐藏参数让我每月少写 40% 样板代码
前端·github
没烦恼30111 分钟前
无痕模式下 HTTP\-First 拦截引发的“页面刷新”误判
前端
ZhengEnCi12 分钟前
Q02-Vue-React-index.html完全指南
vue.js·react.js·html
文心快码BaiduComate15 分钟前
从个人提效到组织提效:Comate辅助构建自我进化的AI研发系统
前端·程序员
hunterandroid1 小时前
Compose 状态管理:remember、rememberSaveable 与状态提升
前端
星栈1 小时前
Dioxus 接数据库最容易写歪的 3 个地方:sqlx + SQLite 怎么接才顺
前端·rust·前端框架
晴虹1 小时前
vue3-scroll-more:横向滚动条-元素或页签过多滚动显示处理的组件
前端·vue.js
代码搬运媛1 小时前
Claude 全栈开发专用 Rules 配置
前端