时间:2021-05-26
主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值
然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径
然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径
由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所以暂时不存在让他们的回调地址支持vue的hash模式路由的问题
然后我就只能修改vue Router的路由模式,修改为了hostory模式
好吧,摸索了很久不然可能真的没有办法解决
运维部署的活动地址线上的路径是 https://xxxxx.xxxxl.com/activity
我做了两处修改
1、修改模式
2、切到网站路径下的/activity
3、其它路径切到/activity/
当然这么处理以后本地运行出来肯定是白板。因为方便我一般是切到文件夹下直接 run的
没有再本地使用搭建本地的所以,需要两份路由一份只修改模式,一份继修改模式又切换路径
然后这样只是代码上的处理我们还需要修改服务端的配置
基于运维良好的配合,才能尝试出来,很是开心
他们本来对活动做的配置
参考router官方文档https://router.vuejs.org/zh-cn/essentials/history-mode.html
使用 try命令尝试多种配置
location / { try_files $uri $uri/ /index.html; }
然后完成这些设置以后线上终于可以访问 https://xxxxx.xxxxx.com/activity/valentine
这种路径的形式了,当然这个地址是实际存在的,它并不会跳转到配置的路由的首页
以上这篇vue vue-Router默认hash模式修改为history需要做的修改详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
修改vue-router的配置文件,默认位置router/index.jsimportVuefrom'vue'importRouterfrom'vue-rout
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋。众所周知,vue-router有两种模式,hash模式和history模式。带#的则是hash模式
从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的,而hash是不需要的,只不过地址会多了一个#/的后缀。使用
vue-router默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。如果不想要很丑的hash,我们可以用路