Vue3.0路由将哈希(hash)更改为历史(history)模式

最新推荐文章于 2025-10-17 19:06:58 发布

原创

最新推荐文章于 2025-10-17 19:06:58 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

路由哈希模式更换为历史模式

步骤

步骤

将路由替换为history模式
更换配置文件中配置的根路径
查找项目中存在的哈希跳转

将路由替换为history模式

import {
   
   
  createRouter,
  createWebHistory,
} from 'vue-router'

const router = createRouter({
   
   
  history: createWebHistory(),

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

2025专业AI写手!

关注关注

3
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

四、Vue路由的两种模式：hash模式与history模式详解和对比

qq_44849312的博客

08-20

1132

如果项目不需要考虑服务器配置，对 URL 的美观度要求不高，并且不涉及 SEO 优化，那么 Hash 模式是一个简便可行的选择。如果追求更友好的 URL，更好的 SEO 支持，同时愿意处理一些服务器配置的问题，那么可以选择 History 模式。History 模式使用浏览器的 History API，通过修改浏览器的历史记录来实现前端路由的切换。Hash 模式是 Vue Router 默认的路由模式，在这种模式下，URL 中会包含一个带有 # 符号的哈希部分，例如。

Vue的路由实现：hash模式和 history模式

克里斯蒂亚诺更新的博客

04-16

1107

在 Vue 中，路由的实现通常使用 Vue Router 库。Vue Router 提供了两种路由模式：哈希模式（Hash mode）和历史模式（History mode）。

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

Vue下路由History模式打包后页面空白

weixin_34232617的博客

07-02

821

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了...

Vue3：路由的两种模式history模式和hash模式

Brave_heart4pzj的博客

03-21

2520

Vue

Vue3 路由配置和使用与讲解（超级详细）

最新发布

2301_78209919的博客

10-17

1336

本文介绍了Vue Router的基本安装和使用流程。主要内容包括：(1)通过npm安装vue-router；(2)创建路由配置文件(index.ts)，定义路由表、历史模式并导出路由实例；(3)在main.ts中注册路由；(4)在App.vue中使用RouterLink和RouterView组件实现导航和页面渲染。文章还解释了路由传参方式、嵌套路由概念以及createWebHistory与createWebHashHistory的区别。整个流程清晰展示了如何从零开始配置Vue Router，使其成为Vue应

vue vue-Router默认hash模式修改为history需要做的修改详解

10-18

今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue hash模式切换成history模式

Cynthia_Wiki的博客

10-17

2547

第一步，根据项目情况在router/index.js里修改 mode: 'history', // 放在根目录 base: '/', mode: 'history', // 放在子目录 base: '/子目录名', 第二步，打包配置里，根据项目路径配置情况修改 //子目录 assetsPublicPath: '/子目录名', //根目录 assetsPublicPath: '/...

vue-router 将默认的哈西模式改为history模式

秋来九月八

11-05

3540

主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。不涉及浏览器 URL，而是直接操作路由历史栈。});默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。

vue hash模式改成history,同时实现spa预渲染

奇想派

03-01

4200

1.前言由于公司需要把首页进行seo排名,但是首页已经完成好,并且还是hash模式,要做成seo排名,不能有hash模式的#,同时要能读取到渲染好的页面.所以,针对这2点困难,最终想到的解决方案是: 先hash需要转换为history,保证是无#的美观模式; 需要做到提前渲染好,可以采取vue的SSR,spa预渲染或nuxt.js. 2.选取渲染方式首先,hash转换为history已......

vue路由从hash模式切换到history模式

weixin_45018314的博客

07-16

1922

由于微信登录的限制不得不把hash模式更换为history模式 vue-router 在router.js下增加mode字段，如果部署环境不为根目录，需要添加base属性，填写服务器的路径（.com后路径） home/index为vue-router中路由打包路径也需要修改为对应的前缀，否则访问不到对应的资源 vue.config.jsz 注意！！！！！！：base值路径两侧必须加 / ...

Vue下路由History模式打包后页面空白的解决方法

12-09

Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...

vue-router中的hash和history两种模式的区别

10-18

Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来...

vue3如何切换hash/history两种路由模式

时清云的博客

06-19

4666

本文介绍了在vue3中，使用history和hash两种路由模式的方法使用createWebHistory 2、hash模式使用createWebHashHistory

VUE项目部署相关问题——hash地址更改为history地址

weixin_44689807的博客

11-29

942

将hash地址更改为history模式，前端需要做的是在router.js里添加mode：history，有时还需要啊添加base，base为文件部署文件路径，此处未用。再将vue.config.js文件里的publicPath:"./"更改为publicPath:"/"，去掉“.”即可。后端需要更改服务器配置，以便更好的显示页面，如果刷新后出现404，则是服务器端未配置好。地址更改好后可能出现数据未响应问题，解决方案见下篇。

【Vue3】路由怎么切换成 history 模式

sparks42的博客

10-14

4498

两句代码： import { createWebHistory, createRouter } from "vue-router"; // 1 const router = createRouter({ history: createWebHistory(), // 2 routes, });

vue3切换路由模式——Hash 、histoary

weixin_44192389的博客

09-10

3503

hash 对应 createWebHashHistory。history 对应 createWebHistory。使用createWebHashHistory。使用createWebHistory。1、history模式。

vue hash模式变history模式

qq_45814232的博客

10-09

430

import VueRouter from "vue-router"; import Vue from 'vue' import Home from "../components/Home"; import About from "../components/About"; Vue.use(VueRouter) const routes=[ {path:'', redirect:'/home'}, {path:'/home',component:Home}, {path:'/about'

Vue hash模式改为history模式

06-09

1913

如上图所示非常简单,只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了

微信公众号开发vue把hash转为history

前进者

09-25

890

最近在做微信公众号项目的时候，因为获得签名或者分享的时候的url微信有如下说明： url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。作为前端怎么把hash转为history？第一步：路由配置的 mode:'history',...

vue将哈希路由改为history路由

07-13

要将 Vue 的哈希路由（hash mode）改为 history 路由（history mode），可以按照以下步骤进行操作： 1. 首先，确保您的项目已经安装了 Vue Router。如果尚未安装，可以使用以下命令进行安装： ```bash npm install vue-router ``` 2. 在项目的主入口文件（一般是 `main.js`）中导入 Vue Router，并创建一个路由实例： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', // 设置为 history 路由模式 routes: [ // 定义路由 // ... ], }); new Vue({ render: (h) => h(App), router, // 将路由实例添加到根组件中 }).$mount('#app'); ``` 注意，这里的关键是将 `mode` 设置为 `'history'`。 3. 在服务器端进行配置，以确保在使用 history 路由时能够正确处理路由请求。这是因为在 history 路由模式下，直接访问某个路由路径时，服务器需要返回对应的页面。例如，在使用 Node.js/Express 作为服务器时，可以添加如下配置： ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); // 处理所有路由请求，返回 index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 这样，当用户直接访问某个路由路径时，服务器会返回 `index.html`，然后在客户端由 Vue Router 接管路由的处理。 4. 最后，根据您的需求，使用 Vue Router 的路由功能进行定义和使用路由。这样，您就成功将 Vue 的哈希路由改为了 history 路由。记得在切换路由时，不再出现 `#` 符号，URL 更加美观。