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;
}
相关推荐
be or not to be38 分钟前
CSS 定位机制与图标字体
前端·css
DevUI团队1 小时前
🔥Angular高效开发秘籍:掌握这些新特性,项目交付速度翻倍
前端·typescript·angular.js
Moment1 小时前
如何在前端编辑器中实现像 Ctrl + Z 一样的撤销和重做
前端·javascript·面试
宠..1 小时前
优化文件结构
java·服务器·开发语言·前端·c++·qt
Rysxt_1 小时前
Vue.js 中 LocalStorage 与 SessionStorage 深度实践指南
vue.js·localstorage·sessionstorage
Tencent_TCB1 小时前
AI Coding全流程教程——0基础搭建“MEMO”健康打卡全栈Web应用(附提示词)
前端·人工智能·ai·ai编程·codebuddy·claude code·cloudbase
小猪猪屁1 小时前
权限封装不是写个指令那么简单:一次真实项目的反思
前端·javascript·vue.js
hteng1 小时前
跨域 Iframe 嵌套:调整内部 Iframe 高度的终极指南 (以及无解的真相)
前端
Polaris_o1 小时前
轻松上手Bootstrap框架
前端
1024小神1 小时前
微信小程序前端扫码动画效果绿色光效移动,四角椭圆
前端