vue2 项目history模式切换成hash模式

TechPainter

于 2024-08-21 16:47:41 发布

阅读量201

点赞数 13

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59287025/article/details/141397384

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做的一个需求，由原来是history模式改为hash模式，需要注意的一些问题。

1、在vue.config.js中修改publicPath将绝对路径 '/' 改为相对路径 './'

2、在router/index.js文件中将路由模式history改成hash

3、路由跳转方式将location.href改成 this.$router.push

其它根据不同需求来调整！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TechPainter

关注关注

13
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2 项目history模式切换成hash模式

vue中history模式改为hash模式修改的地方
复制链接

扫一扫

专栏目录

一文了解vue-router之hash模式和history模式

10-16

本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。首先，让我们详细了解一下hash...

区分vue-router的hash和history模式

10-14

Vue Router 是 Vue.js 应用中的官方路由库，它提供了两种模式：hash 和 history，用于管理SPA（单页面应用）的路由。理解这两种模式的区别对于优化用户体验和避免潜在的技术问题至关重要。 **一、hash模式** 在...

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

vue2 工程 hash 模式转成 history模式记录

lyx1838102537的博客

07-24

272

vue2 工程 hash 模式转成 history模式

Vue Router 路由hash和history模式

猫老板的豆

05-08

1337

在 Vue 中，路由的两种主要模式是和，默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。

vue路由模式及 history 模式下服务端配置

csdn姚宏波

04-28

1万+

前言 vue 项目中，我们比较常用的模式为 hash 和 history 模式默认情况下，vue 项目采用的就是 hash 模式有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为 1. hash 模式 1.1 什么是 hash 模式先从一个熟悉的锚标记案例开始，帮助大家理解 hash

vue项目如何部署？history与hash模式部署时的区别

yiyueqinghui的博客

02-25

2535

一、如何部署前后端分离开发模式下，前后端是独立布署的我们知道vue项目在构建后，是生成一系列的静态文件前端只需要将其上传至目标服务器的web服务指定的静态目录下即可二、404问题我们先还原一下场景： vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误先定位一下，HTTP 404 错误意味着链接指向的资源不存在问题在于为什么不存在？且为什么只有history模式下会出现这个问题？ 1、为什么history模式下有问题 Vue是属于单页应用（SPA）而SPA是一种网络应用.

Vue 项目中 history 路由模式的使用

lwaner的博客

07-10

816

在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。

vue hash模式切换成history模式

Cynthia_Wiki的博客

10-17

2333

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

VueRouter — vue路由hash模式和history模式

热门推荐

小绵杨

03-23

1万+

目录一、前言二、hash模式三、history模式一、前言对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。 vue脚手架搭建的项目的路由默认是hash模式。 hash模式：创建路由实例时，添加mode:"history"属性，即可使用history模式。 const router = new VueRouter({ routes, mode: "history" }) history模式：二、hash模式最开始学习超链接a时，就可以利用锚点”#”实现跳转

vue路由的两种模式 hash与history

肥晨开发的学习之路

06-15

2158

可以通过编程式导航或声明式导航的方式，根据具体的需求，在不同的组件之间切换路由。当用户切换路由时，Vue 路由会监听 URL 的 hashchange 事件，一旦 URL 的哈希部分发生变化，它就会根据新的哈希值找到对应的路由配置，并动态地加载所需的组件并更新页面内容，形成页面无刷新的效果。所以，在使用 Hash 模式时，每次切换路由都会修改 URL 的哈希部分，而不会改变实际的 URL 路径，因此刷新页面或直接访问某个子路由时，需要保证服务器能正确响应前端路由请求，返回正确的页面内容。

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

时清云的博客

06-19

3563

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

在nginx上部署vue项目(history模式)的方法

08-28

总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...

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

12-09

在 Vue 项目中切换到 History 模式时，首先需要在 Vue Router 配置中明确指定 `mode`： ```javascript const router = new VueRouter({ base: '/history', mode: 'history', routes: [...] }); ``` 这里的 `base`...

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

10-18

总之，将 Vue Router 从 Hash 模式切换到 History 模式涉及到 Vue 项目的路由配置修改、项目结构的调整以及服务器配置的更新。只有当服务器能够正确处理所有路由请求时，History 模式才能正常工作。遵循以上步骤，你...

11.动态标签页的一些优化和bug的解决

qq_55121347的博客

08-16

334

动态标签页的一些优化和bug的解决

详细介绍 Vue3 的 watch 和 watchEffect

weixin_52648900的博客

08-15

979

非常详细介绍了vue3的watch和watchEffect区别和联系

avue-crud 自定义搜索项插槽

最新发布

qq_31683775的博客

08-20

117

加上 -search 就可以自定义查询项了。

【前端】VUE动态引入组件通过字符串动态渲染模板动态生成组件

我是Superman丶的博客

08-19

146

【前端】VUE动态引入组件通过字符串动态渲染模板。

vue中的hash模式和history模式有什么区别

07-11

在Vue中，路由有两种模式：hash模式和history模式。 1. Hash模式： - URL中使用`#`符号，后面跟着路由路径。 - 例如：`http://example.com/#/home` - Hash模式不会向服务器发送请求，所有的路由都在客户端进行处理。 - Hash模式可以兼容性较好，因为不会影响到服务器的路由配置。 2. History模式： - URL中没有`#`符号，直接是完整的路径。 - 例如：`http://example.com/home` - History模式通过使用HTML5 History API，在浏览器历史记录中添加新的记录，实现前端路由切换。 - History模式需要服务器的支持，即在服务器上配置相关的路由规则，确保在刷新页面时能够正确加载对应的前端路由。区别： 1. URL格式：Hash模式使用带有`#`的URL，而History模式使用无`#`的URL。 2. 兼容性：Hash模式在各种浏览器上都能正常运行，而History模式需要服务器的支持，并且在某些旧版本浏览器中可能不兼容。 3. 美观性：History模式的URL更加美观，没有`#`符号的干扰。而Hash模式的URL可能会被认为是书签链接。 4. 部署：Hash模式不需要特殊的服务器配置。而History模式需要服务器配置支持，以确保在刷新页面时能够正确加载前端路由。在实际应用中，可以根据具体需求选择使用Hash模式还是History模式。如果不需要考虑兼容性问题，且希望URL更美观，可以选择History模式；如果需要兼容性好，或者无法配置服务器，可以选择Hash模式。