干掉Vue路径里的那个# | 踩坑记录

最新推荐文章于 2023-08-27 16:06:49 发布
最新推荐文章于 2023-08-27 16:06:49 发布
阅读量362 收藏
点赞数
分类专栏： 前端小记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38553138/article/details/124750775
版权
本文记录了在Vue项目中将路由模式从hash模式改为history模式的过程，包括修改Vue配置和服务器配置的详细步骤。在修改过程中遇到的子路由404问题，通过调整Nginx配置得以解决。欢迎技术交流。
摘要由CSDN通过智能技术生成

微信公众号：做棵大树 | 欢迎关注，一起进步~

背景

自己在搞个短链接转换的小工具，整体转化流程很简单就是下图这个样子。

最低0.47元/天 解锁文章
做棵大树
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue踩坑记录
suraelax的博客
10-28 241
“vue2-editor”: “^2.10.2” 上传图片 useCustomImageHandler @imageAdded="handleImageAdded" 无效， 在handleImageAdded发现没有执行这个函数， 改为 @image-added="handleImageAdded 错误解决
VUE 跳转链接去掉中间#号
小洪帽i的博客
04-04 1465
VUE 跳转链接去掉中间#号
浅谈vue项目,访问路径#号的问题
01-19
刚入手vue，有好多的疑问，目前遇到的是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟然是http://ip:port/#/，这个”/#/“不知道是什么东西，于是百度查了一下。 原因：对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也正是称之为单页面的原因。而vue-router默认hash模式——–使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面更换的，而只有更换url中的查询字符串和hash值的时候才不会重新加载页面。 如果不想要
Vue 去除路由路径中的#
最新发布
xy的博客
08-27 1037
问题 访问路径的时候，会出现#，想去除 ``` import { createRouter, createWebHashHistory } from "vue-router" import Auth from "../views/Auth.vue" // 定义路由 const routers = [{ path:"/", redirect:"/auth" },{ ...
Vue路由中的hash和history模式的区别及原理
愚公的博客
12-03 922
hash模式 优点 兼容性强，兼容性达到了IE8 除发送ajax和资源请求外不会发送其他多余请求 改变#后的路径、不会自动刷新页面 无需服务端进行配合 缺点 访问路径上包含#,不美观 对于需要锚点功能的需求会与当前路由机制发生冲突 重定向操作时，后段无法获取url完整路径。 history模式 优点 符合url地址规范, 不需要#, 使用起来比较美观 可以使用history.state获取完整的路由信息 后端可以获取到完整的路由信息 缺点 兼容性只到IE10 改变url路径后、会
vue项目去掉URL中的#
sunliyings17的专栏
04-08 1万+
去掉VUE项目路径中难看的#号，所经历的过程，和踩过的坑
vue项目访问路径#号的问题
流楚丶格念的博客
03-24 6085
是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟然是http://ip:port/#/，这个”/#/“不知道是什么东西，于是百度查了一下。 原因：对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也正是称之为单页面的原因。而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面更换的，而只有更换url中的
Vue 去除路径中的＃号
08-27
Vue 去除路径中的＃号 在 Vue 项目中，我们经常会遇到路径中带有＃号的问题，这是因为 Vue Router 默认使用的 Hash 模式导致的。在 Hash 模式下，路由会以＃号开头，例如 `/#/path/to/resource`。这种情况下，URL ...
vue踩坑记录之数组定义和赋值问题
12-29
问题场景：vue页面初始化展示请求后台返回的数据失败，没有报错 有效日期> type=daterange range-separator=至 start-placeholder=开始日期 end-placeholder=结束日期> data(){ return{ effective
Vue——自定义项目访问路径
小欣儿的专栏
08-02 2万+
默认情况下，Vue项目的访问路径以 /#/，但我们有时候可能需要给项目定义一个明确的访问路径，如 /my_vue/ 等，这时我们需要修改配置，自定义项目的访问路径，方法如下： 1. 在index.html添加 <meta base=”/pay/”> (pay自定义的名称) <!DOCTYPE html> <html> <head> &...
vue中路由双击bug的解决 以及地址栏中#去除的配置
weixin_48864616的博客
02-13 473
双击跳转路由时，会报错，可以给VueRouter设置相关的重置方法解决问题，找到router/index.js添加下面两行代码 在这里插入代码片 //解决 用this.routes.push 跳转时报错问题 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(er
前端vue2、vue3去掉url路由“ # ”号——nginx配置
热门推荐
编程知识分享，主打前端
08-27 4万+
大家好，我是yma16，本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。html的 hash模式HTML的hash模式指的是URL中的锚点部分（#后面的内容）被用于在单个页面中显示不同的内容，而不是导航到不同的页面。在这个示例中，#about部分是一个锚点，用于在页面上显示关于页面的内容，而不是导航到一个新的页面。在使用hash模式时，可以使用JavaScript监听hashchange事件，以便在锚点改变时执行相应的操作。
【路由带参跳转】解决带参跳转到别的页面然后刷新页面参数就会丢失问题
丁东的博客
03-09 1142
参数并没有丢失，只是无法解析了，接下来说一下解决方法。可以看到获取到得参数变成了。
VUE3设置是否带#号，与vue2的不同设置
weixin_44236141的博客
09-21 1421
VUE3设置是否带#号，与vue2的不同设置
vue项目，地址栏中含有#是什么意思？如何去掉？
MtangEr的博客
03-25 1067
转载原文：https://blog.csdn.net/vincent_duan/article/details/103548914?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMa
vue中引入路径用法及说明
zzy7075的专栏
03-07 2721
vue中引入路径@的用法及说明
vue路由上的#/怎么去掉_vue路由history模式_如何去除vue项目中的#
weixin_36165323的博客
02-22 774
在使用vue围幸业很例站闪以近着好务多如宽动为近着好-cli搭建的环境中，浏览器上URL地址中是存在'#'的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式，例如浏刚学互久维数曾总屏果以。公实式带近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我...
java重定向到vue路径有#
07-27
在Java中重定向到Vue路径时，如果Vue的路由路径中包含了"#"符号，需要对该符号进行编码处理。 Java中可以使用`URLEncoder`类来对URL进行编码，将特殊字符转换为URL编码格式。在重定向时，你可以使用以下代码来处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值