记录vue-router history模式 采坑

最新推荐文章于 2024-06-22 15:46:00 发布
最新推荐文章于 2024-06-22 15:46:00 发布
阅读量937 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32900003/article/details/106053009
版权

vue路由有 hash(浏览器环境) 、 abstract (Node.js 环境)、history(Html5模式)三种方式。

默认mode为hash,支持所有浏览器，缺点（url路径为有#号）

history 模式，依赖后端配置，详细配置地址

history 模式打包之后的本地文件，浏览器不能访问

使用history模式，没有后台依赖，会出现打包放在服务器之后浏览器刷新404，跳转404等问题

 

这么近又那么远
关注
专栏目录
浅谈vue项目4rs vue-router上线后history模式遇到的坑
12-03
此次项目开发完后准备打包，因为hash模式的路径带#看着实在是有点丑，所以采用history模式。因为本次项目属于以前网站重构，但是seo问题，所以需要以前的一些地址路径写，所以vue-router的路径全部重改了。打包后查了网上一大堆，都说要把config里的index.js 里的build里的 assetsPublicPath: ‘/’改成‘./’，打包上线发现在hash模式下是没问题的， 但一旦改成history模式，有些动态js文件的路径都是错的。无奈之下死马当活马医，把‘./’改回了‘/’在history模式 下再次打包上线，发现点击跳转页面都是正常的，有些小激动。但是history
详解express使用vue-router的history踩坑
01-01
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 当你使用 history 模式时，URL 就像正常的 url，例如 yoursite.com/user/id，也好看… 个人理解 上面是官方的解释，文档的一贯风格，只给懂的人看。两年前我比现在还菜的时候，看了这段话表示他在说个锤子，直接跳过了。 我不讲:hammer:，直接举:
vue3和electron打包出现页面空白的解决方案之一
最新发布
2302_79641988的博客
06-22 789
修改完路由模式后，记得把在页面中进行导向的路由路径前加上#号，如window.open(`${window.location.origin}/#/hardcheck`, '_blank');vue使用路由进行开发，vue路由有两种，分别为createWebHashHistory和createWebHistory。当你的打包后的electron应用页面出现空白，可以检查一下你的路由使用的哪一种。一般来说，electron不支持createWebHistory路由。
HTML5 History 模式的坑
weixin_39930992的博客
03-25 2492
周五下班前更新了一下代码，结果一更，出现了一个bug！ 现象1：有一两个页面的Logo不见了... 于是打开Console，查看资源的请求情况，发现请求正常且成功。 这时候又在调试的过程中发现了第二个问题。 现象2：刷新一下，页面无法渲染，并报错各种资源的丢失，无法正常加载。 但是在本地开发的时候，一切资源正常，刷新也不会出现无法加载的问题，一般大家看到这里大概就会发现这...
layui iframe调用父页面的方法及变量（子页面调用父页面）
东东东东东辉
07-06 5049
layui iframe调用父页面的方法及变量（子页面调用父页面） 第一种情况是弹出层想使用父页面的变量和事件触发 1.1 这个是在弹出层时关闭该层的方法 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 1.2 如果使用父页面变量可使用parent parent.data; parent.$(".item").click();
Vue.js 中hash路由和history路由原理及优缺点
qq_39454432的博客
06-29 7839
Vue.js 中hash路由和history路由原理及优缺点 hash模式: 原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件 优点: (1) 只需要前端配置路由表, 不需要后端的参与 (2) 兼容性好, 浏览器都能支持 (3) hash值改变不会向后端发送请求, 完全属于前端路由 缺点: (1) hash值前面需要加#, 不符合url规范,也不美观 history模
微信小程序开发附源码：vue-router history模式下的微信分享小结.doc
05-18
微信小程序开发附源码：vue-router history模式下的微信分享小结
vue-router启用history模式下的开发及非根目录部署方法
10-17
当使用Vue-Router时，可以选择不同的路由模式，其中最常用的两种模式是hash模式和history模式。本文将详细介绍如何在启用history模式下进行开发，并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
vue-router history模式下的微信分享小结
08-27
在本篇文章中，我们将介绍vue-router history模式下的微信分享小结，主要讲解了微信分享遇到的坑和解决方法。 首先，让我们了解一下vue-router history模式。vue-router history模式是一种基于浏览器的history API...
autoit选中图标无反应_JSelectRole点击出现一次下拉框，消失后再点击无响应
weixin_39717598的博客
11-28 254
代码托管：Github和Gitee，国内用户使用Gitee下载速度较快。系统环境：Win10/Ubuntu，JDK8，maven，node，docker。依赖服务：Docker，MySQL8，Redis5一，问题排查Jeecg技术社区有用户提交一个issue，自定义组件下选择职务失败，点击一次后消失,显示选中状态,再次点击无反应。复现问题，点击输入框功能失效，此时右边的“选择”按钮工作正常，点击弹...
vue项目4rs vue-router上线后history模式遇到的坑
u010276653的专栏
04-04 4405
  此次项目开发完后准备打包，因为hash模式的路径带#看着实在是有点丑，所以采用history模式。因为本次项目属于以前网站重构，但是seo问题，所以需要以前的一些地址路径写，所以vue-router的路径全部重改了。打包后查了网上一大堆，都说要把config里的index.js 里的build里的assetsPublicPath: '/'改成‘./’，打包上线发现在hash模式下是没问题的，但...
Vue设置路由为History模式，打包后访问404问题
baifucn的专栏
12-23 3487
一般情况下开发的单页应用的URL都会带有#号的hash模式，因为业务需求，或者不想使用带#号，我们通常在路由index.js里面设置： export default new Router({ mode: 'history', 这样URL不再会有#号，在Dev开发阶段一切都是正常的，可是在使用npm run build打包发布后页面显示一片空白和刷新项目路径出现404错误。 解决方法如下： 1、apache需要配置httpd.conf 打开文件在最后添加： ErrorDocument 404 /in
vue-cli + router生成的项目，当mode为history时，直接在url中输入地址页面访问404，或者刷新页面后404
c2311156c的博客
08-30 5867
有的时候，业务中会有一些需求，直接在其他地方，比如邮件中提供系统链接，通过点击一个url直接跳转到我们的系统中来。 在本地开发时，直接输入对应的url就可以访问，但是当项目部署在服务器之后，直接输入url就会报错404，这是因为router本身提供的就是一个 虚拟路径，通过router内部的机制进行页面跳转和参数传递的，实际项目中根本不存在此路径对应的资源。 对应此问题，尤大在官网上也提到过，...
this.props.histroy.push中 state 传参问题
miaomiao_1024的博客
05-18 1451
问题描述 【hash路由】利用this.props.history.push() 在发起路由跳转时，将参数赋值给state传参。 【写法如下】 this.props.history.push({ pathname: '/noAccess', state: { name: "lmm"}， search: "name" }); 在 /noAccess 页面下获取参数 const { location: { state = {}, search = "" } } = this.props console.log
Vue踩坑日记： history路由打包后无法加载
qq_42221363的博客
12-16 4296
在使用Vue框架时避免不了会使用到vue-router工具，Vue-router提供了Hash和History两种路由模式。默认为Hash模式，但此模式下URL中会存在 “#” 缺少美观，并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。 const router = new VueRouter({ mode: 'history', // 设置为history模式 base: process.env.BASE_URL, ... }) 但是History路由模式也不是没有
解决非Router直接调用渲染的组件获取不到history属性问题
魂断@蓝桥的博客
01-07 431
在日常开发中，经常会封装好公共的自定义组件，方便在其他组件中复用，这很容易造成一下问题：在公共组件中调用history属性来返回上一级失败， 这是因为我们封装的组件并不是通过Route直接触发渲染的，所以在调用history时并没有拿到相应数据，这个时候我们可以使用React -Router中的withRouter函数将自定组件包裹，withRouter函数返回值也是一个组件，所以能通过props拿到相对应的属性， function NavHeader（{children，history}）{ retu
Vue路由的hash模式与history模式原理区别及优缺点
qq_57334853的博客
07-15 4145
今天说说Vue路由的hash模式与history模式的区别，这个也是面试常问的问题。 总结 传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。 前端路由是不涉及服务器的，是前端利用hash或者HTML5的 关于Vue路由、一个单页面应用可以做到多路由跳转并按需加载页面代码，这样的方式就很神奇，以往的做法都是通过锚点来定位对应的页面代码，而这种古老的方式存在最大的缺陷就是首屏加载缓慢，一次性加载了所有页面代码。...
vue-router实现history模式配置
热门推荐
筑释科长的博客
02-09 1万+
一：概述 vue-router可以设置两种模式：hash和history const router = new VueRouter({ mode: "hash", // mode: "history", routes }); 如果使用hash模式，一般无需特殊配置； 但如果要使用history模式，则前端和服务端要做一定的设置； 使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务
Express与Vue-router history模式踩坑指南
"这篇文章主要讲解了在Express框架中如何配合Vue-Router使用history模式时遇到的问题及解决策略。Vue-Router有两种模式：hash模式和history模式。默认的hash模式通过URL的hash值来实现页面路由的改变，而无需页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值