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;
}
相关推荐
MaCa .BaKa1 分钟前
38-日语学习小程序
java·vue.js·spring boot·学习·mysql·小程序·maven
HouGISer2 分钟前
副业小程序YUERGS,从开发到变现
前端·小程序
outstanding木槿8 分钟前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
霸王蟹1 小时前
React中useState中更新是同步的还是异步的?
前端·javascript·笔记·学习·react.js·前端框架
霸王蟹1 小时前
React Hooks 必须在组件最顶层调用的原因解析
前端·javascript·笔记·学习·react.js
专注VB编程开发20年1 小时前
asp.net IHttpHandler 对分块传输编码的支持,IIs web服务器后端技术
服务器·前端·asp.net
爱分享的程序员2 小时前
全栈项目搭建指南:Nuxt.js + Node.js + MongoDB
前端
隐含2 小时前
webpack打包,把png,jpg等文件按照在src目录结构下的存储方式打包出来。解决同一命名的图片资源在打包之后,重复命名的图片就剩下一个图片了。
前端·webpack·node.js
lightYouUp2 小时前
windows系统中下载好node无法使用npm
前端·npm·node.js
Dontla2 小时前
npm cross-env工具包介绍(跨平台环境变量设置工具)
前端·npm·node.js