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;
}
相关推荐
IT瘾君1 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库1 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端2 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪2 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程2 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常3 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
鸿蒙布道师3 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt