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需要做的修改详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

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

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

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

    主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值 然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径 然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径 由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所

  • Vue中如何把hash模式改为history模式

    Vue中如何把hash模式改为history模式

    目录 把hash模式改为history模式 关于路由hash和history模式 hash模式 history 模式 二者对比 把hash模式改为history模式 如上图所示非常简单 只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了 关于路由hash和history模式 hash模式 hash 就是指 url 后的 # 号以及后

  • Vue Router路由hash模式与history模式详细介绍

    Vue Router路由hash模式与history模式详细介绍

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认是hash模式. hash模式: 创建路由实例时,添加mode:"history"属性,即可使用history模式. const router = new VueRouter({ routes, mode: "history" }) history模式: 二.hash模

  • vue面试created中两次数据修改会触发几次页面更新详解

    目录 面试题: 一.同步的 二.异步的 三.附加 总结 面试题: created生命周期中两次修改数据,会触发几次页面更新? 一.同步的 先举个简单的同步的例子: new Vue({ el: "#app", template: `<div> <div>{{count}}</div> </div>`, data() { return { count: 1, } }, created() { this.count = 2; this.coun

  • Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

    目录 初识vue 模板语法 插值语法 指令语法 数据绑定 单向绑定 双向绑定 el和data的两种写法 el data Object.defineProperty方法 事件处理 事件修饰符 键盘事件 定义命名(不常用) 初识vue vue工作时,必须先创建Vue实例,且要传入一个配置对象 容器内的代码依然符合html规范,混入了一些特殊的Vue语法 <div id="root"> <h1>hello,{{name}}</h1> </div>

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

  • 改变vue请求过来的数据中的某一项值的方法(详解)

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • vue父组件触发事件改变子组件的值的方法实例详解

    父组件向子组件通信 业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作 后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-

  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

随机推荐