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

 更新时间:2018年09月13日 09:44:35   作者:Annkeke  
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

主要是因为活动页会存在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需要做的修改详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目打包优化方式(让打包的js文件变小)

    vue项目打包优化方式(让打包的js文件变小)

    这篇文章主要介绍了vue项目打包优化方式(让打包的js文件变小),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue中Vue.extend()的使用及解析

    Vue中Vue.extend()的使用及解析

    这篇文章主要介绍了Vue中Vue.extend()的使用及解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 从vue源码看props的用法

    从vue源码看props的用法

    平时写vue的时候知道 props 有很多种用法,今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • vue跳转同一个路由参数不同的问题

    vue跳转同一个路由参数不同的问题

    这篇文章主要介绍了vue跳转同一个路由参数不同的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue2.x与Vue3.x中路由钩子的区别详解

    Vue2.x与Vue3.x中路由钩子的区别详解

    这篇文章主要介绍了Vue2.x与Vue3.x中路由钩子的区别,分别介绍了路由钩子的分类,路由配置守卫钩子以及组件内守卫钩子等有需要的朋友可以借鉴参考下
    2021-09-09
  • Vue 3.0 中 hooks 的概念示例详解

    Vue 3.0 中 hooks 的概念示例详解

    在Vue3.0框架中,hooks函数允许将组件逻辑抽离复用,提高代码的可维护性和复用性,通过封装逻辑如获取数据、处理状态等,hooks使得组件开发更加高效和清晰,示例中,useDog.ts用于获取狗狗图片,展示了hooks封装数据和逻辑、响应式数据和异步操作的能力
    2024-10-10
  • 巧用Vue.js+Vuex制作专门收藏微信公众号的app

    巧用Vue.js+Vuex制作专门收藏微信公众号的app

    这篇文章主要为大家详细介绍了vue自定义指令三步如何实现数据拉取更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue scroller返回页面记住滚动位置的实例代码

    vue scroller返回页面记住滚动位置的实例代码

    这篇文章主要介绍了vue scroller返回页面记住滚动位置的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • 详解vue 中使用 AJAX获取数据的方法

    详解vue 中使用 AJAX获取数据的方法

    本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法,在VUE开发时,数据可以使用jquery和vue-resource来获取数据,有兴趣的可以了解一下。
    2017-01-01
  • Vue中v-show添加表达式的问题(判断是否显示)

    Vue中v-show添加表达式的问题(判断是否显示)

    这篇文章主要介绍了关于Vue中v-show中添加表达式用于判断是否显示的问题,很多朋友经常会遇到这样的需求,有数据来源和标签类型两行选项,需要实现点击上面的某个数据来源时,标签类型自动切换功能,感兴趣的朋友一起看看吧
    2018-03-03

最新评论