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;
}
相关推荐
老虎0627几秒前
JavaWeb前端(HTML,CSS具体案例)
前端·css·html
Mintopia6 分钟前
一个月速成 AI 工程师:从代码小白到智能工匠的修炼手册
前端·javascript·aigc
Mintopia9 分钟前
Next.js 全栈:接收和处理请求
前端·javascript·next.js
袁煦丞43 分钟前
2025.8.18实验室【代码跑酷指南】Jupyter Notebook程序员的魔法本:cpolar内网穿透实验室第622个成功挑战
前端·程序员·远程工作
Joker Zxc1 小时前
【前端基础】flex布局中使用`justify-content`后,最后一行的布局问题
前端·css
无奈何杨1 小时前
风控系统事件分析中心,关联关系、排行、时间分布
前端·后端
Moment1 小时前
nginx 如何配置防止慢速攻击 🤔🤔🤔
前端·后端·nginx
晓得迷路了1 小时前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js
前端小巷子1 小时前
Vue 自定义指令
前端·vue.js·面试