Vue 去除hash路由默认的#

最新推荐文章于 2025-07-03 08:25:48 发布

原创最新推荐文章于 2025-07-03 08:25:48 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何在Vue项目中配置路由使用History模式而非默认的Hash模式，并提供了具体的配置步骤及nginx示例配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

. vue 开启路由后，默认的路由中会带上'#', 不雅

分析

. vue路由默认的是hash的模式, 开启history默认 可以向正常的路由访问
  但是这种需要后端支持， 不然很容易404

解决

1. 实例化路由规则的时候

const router = new VueRouter({
mode: ‘history’,
routes // （缩写）相当于 routes: routes
})

2. nginx 相应的配置

location / {
try_files $uri$ uri/ /index.html;
}

3. 参考文档 `https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90`

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cominglately

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

去除vue路由跳转地址栏后的哈希值#

oceanheavenweb的博客

11-02

1万+

去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# import Vue from 'vue' //1.引入vue-router import Router from 'vue-router' import find from '../components/find' import mall from

vue去掉hash值#

weixin_41308566的博客

04-12

6014

官网地址：https://router.vuejs.org/zh-cn/essentials/history-mode.html但是仅仅按照官网的做法，还是不行，看了很多人的博客和笔记才解决的。后台需要配置很多，前端仅仅需要加上a) mode: "history",b)将webpack的配置文件的index: path.resolve(__dirname, '../dist/index.html...

参与评论您还未登录，请先登录后发表或查看评论

Vue - 去掉路由中的#号

编程旅者

03-06

5004

vue-router默认是hash模式，在hash模式下，是会有#号在URL上，可以在路由的第一行添加 mode:history来去掉#号。 const router = new Router({ mode: 'history', routes: [] })

Vue路由模式大揭秘：选对模式，页面跳转不再“迷路“！

07-03

1232

今天咱们聊聊Vue路由的模式问题，很多新手在配置路由时，往往对hash和history模式傻傻分不清楚，结果部署上线后各种404、页面刷新白屏，甚至SEO不友好。今天我就带大家彻底搞懂Vue路由的几种模式，让你在项目里游刃有余！

在 vue中去掉 # （新手必看）

Bjdn949_hdh的博客

10-29

638

去掉 #

vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置

qq_44552416的博客

01-10

6034

如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。

hash #怎么去掉

weixin_42727360的博客

05-09

2411

1、路由mode改为"history"; const router = new VueRouter({ mode: ‘history’, routes // （缩写）相当于 routes: routes }) 2、在项目配置文件中，这个是在 sever{}中如下面两种方式修改，这两种方法都行； location / { try_files $uri $uri/ @router; index index.html; } location @router { re

Vue 去除路径中的＃号

08-27

在 Vue 项目中，我们经常会遇到路径中带有＃号的问题，这是因为 Vue Router 默认使用的 Hash 模式导致的。在 Hash 模式下，路由会以＃号开头，例如 `/#/path/to/resource`。这种情况下，URL 中的＃号会带来不少问题...

SpringBoot+Vue2 History路由模式去掉路径中的#

m0_54454606的博客

08-12

1091

SpringBoot+Vue2 History路由模式去掉路径中的#

vue.js路由mode配置之去掉url上默认的#方法

12-13

如果需要去掉#，只需将mode的默认值’hash’改为’history’即可。 router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode:...

VUE : vue-cli中去掉路由中的井号#操作

10-14

在默认情况下，Vue CLI生成的项目使用的是Hash模式的路由，这会在URL中显示一个“#”符号，如 `http://example.com/#/home`。然而，在某些场景下，比如为了更美观的URL或更好的SEO优化，我们可能希望去掉这个“#”。...

vue路由模式。去掉网址栏中的#号

qq_65248461的博客

03-04

794

部分教学笔记是这样的，时间长了容易记错。前边的mode容易忘。mode: "hash" 去掉#后边两种模式要加上“”

网站建设之去除vue的#

HeroIsUseless的博客

10-31

338

对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因，而vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面的更换的，而只有更换url中的查询字符串和hash值得时候才不会重新加载页面。这里也就是这个道理。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提

python sqlite3.OperationalError: unable to open database file

puhuihui的博客

11-23

2117

路径问题： conn=sqlite3.connect("G:\Python\douban\movie250top.db")

Vue项目路由路径中去掉#

m0_67587248的博客

01-09

2462

在Vue中，有两种常见的路由模式：哈希模式（Hash Mode）和历史模式（History Mode）。要在Vue项目中选择路由模式，在创建Vue Router实例时，可以通过。

【Vue】去掉默认地址栏的#以及后续问题

coralime的博客

02-24

2298

启动vue项目后，地址栏会默认带一个# 原因是vue-router提供了两种模式，一种Hash模式（默认），一种History模式。 vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。在Hash模式下路由地址会默认带一个#，修改成History模式就行了。在/router/index.js页面下，修改mode方式 const router = new VueRouter({ mode:

vue项目去掉地址中的#

tian_jiangnan的博客

05-07

1149

在router下面的index.js下面添加如下代码 mode:"history",//去除哈希值的#号刷新页面就好了,此时没有/#了

vue链接去掉#号

程序源的博客

04-16

626

vue-router 默认为 hash 模式，想要去掉地址中的 # 号，只需要将mode改为history模式 const router = new Router({ mode:'history', routes : [ {path:'/',redirect:'/home',meta:{requireAuth:false}} ] })

vue如何去除url中的#号

m0_52336986的博客

07-11

2517

vue-router默认使用的是hash模式，在路由加载的时候，项目中的url会自带#。如果不想使用#，可以使用vue-router的另一种模式history。在文件目录下的 router->index.js中添加mode: 'history',即可 export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: H

vue+vite 项目去掉#

06-29

<think>我们正在使用VueRouter，因为VueRouter默认使用hash模式（带#），要移除#需要切换到history模式。步骤：1.在定义路由时，创建router实例，设置mode为'history'（在Vue Router4中，使用createWebHistory函数）。2.确保服务器配置正确，因为history模式需要服务器支持，以避免直接访问子路由时出现404错误。具体操作：在Vue项目中，我们通常在router/index.js文件中定义路由。使用VueRouter4（与Vue3配套）时，我们这样设置：首先，安装VueRouter（如果尚未安装）：npm installvue-router@4然后，在路由配置文件（例如src/router/index.js）中：import {createRouter, createWebHistory} from'vue-router'importHome from'../views/Home.vue'const routes= [{ path: '/', component: Home},// ...其他路由]const router= createRouter({history: createWebHistory(),routes})exportdefault router这样就去掉了URL中的#。但是，请注意：使用history模式后，当你直接访问一个子路由（例如/user/123）时，服务器可能会返回404，因为服务器需要配置为对于任何未找到静态资源的请求都返回index.html。服务器配置示例（以Nginx为例）：server{listen80;server_name example.com;location/ {try_files $uri $uri//index.html;}}其他服务器（如Apache、Node.js服务器）也需要类似配置。参考引用[1]中提到了Nginx配置的重写规则，我们可以借鉴其思路：将所有请求重定向到index.html，由前端路由处理。另外，在开发阶段，Vite服务器已经内置了对于history模式的支持，所以开发时不会有问题。但生产环境部署时，必须确保服务器配置正确。总结：修改路由模式为history，并配置服务器支持。相关问题：1.如何配置Nginx服务器以支持Vuehistory模式？2.在Vue Router中，history模式和hash模式有什么区别？3.如果使用Vite，部署时有哪些注意事项？</think>在 Vue + Vite 项目中移除 URL 中的 `#` 符号，需要通过 Vue Router 的 history 模式实现。以下是详细步骤： ### 解决方案 1. **修改路由配置** 在路由文件（通常为 `src/router/index.js`）中： ```javascript import { createRouter, createWebHistory } from 'vue-router' // 替换 createWebHashHistory const router = createRouter({ history: createWebHistory(), // 使用 history 模式 routes: [...] }) ``` 将 `createWebHashHistory()` 改为 `createWebHistory()` 即可移除 URL 中的 `#`。 2. **服务器配置（关键）** 由于 history 模式依赖服务器配置，需在服务器添加回退规则： - **Nginx 示例**： ```nginx server { location / { try_files $uri $uri/ /index.html; # 所有请求重定向到 index.html } } ``` 参考引用[1]的重写规则思路[^1]。 - **Vite 开发服务器**：已自动支持，无需额外配置。 3. **项目部署注意事项** - 确保所有路由在直接访问时返回 `index.html` - 静态资源路径需使用绝对路径（如 `publicPath: '/'`） ### 常见问题排查 - **404 错误**：未配置服务器回退规则，需确保服务器返回 `index.html` - **路由跳转失败**：检查路由守卫逻辑是否兼容 history 模式 - **静态资源加载失败**：在 `vite.config.js` 中设置 `base: '/'` ### 示例配置对比 | **模式** | 路由创建方法 | URL 示例 | |----------------|--------------------------|-------------------| | Hash 模式（默认）| `createWebHashHistory()` | `https://site.com/#/home` | | **History 模式** | `createWebHistory()` | `https://site.com/home` |