vue-router history模式下的微信分享小结

背景

旧项目改造,进行前后端分离。做成了spa,为了保证后端路由时期链接可用性,使用了history模式。

因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用

微信分享遇到的坑

微信官方文档上有下面一段话:

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)

在实际测试和大量真实数据收集后发现,Android4.4+都是支持pushState的。也就是说,没有遇到官方文档所述的问题。(此番调研后才决定采用history模式进行实施的,导致IOS下踩了坑)

IOS下遇到了问题:

# 打开页面时分享没有问题,路由一次之后再分享签名错误(invalid signature)

这个问题是由于IOS微信浏览器下,有着下面的“特性”:

把第一次打开的页面叫做进入页;把前端路由若干次跳转(通过pushState/replaceState改变url)之后,当前打开的页面叫做当前页。

微信验签使用的url(当前网页的URL,不包含#及其后面部分),在Android下取的是当前页url,在IOS下取的是进入页的url(支付目录也是一样)

知道了这个,可以采取下面的办法来解决:

使用vuex保存进入页的URL,每次wx.config需要的参数,都使用进入页的URL来进行签名

至此,微信分享签名错误的问题解决了,但分享还是不正常:# 自定义分享不生效

度娘谷歌了一番,大概有下面几种办法

  • 使用hash模式
  • 做成多页应用,每个页面都是进入页
  • 所有需要自定义分享的页面使用<a>替换<router-link>,跟2类似,使所有自定义分享页面变成进入页

对于我们的业务场景来说,hash模式不能保证历史链接的可用性,多页/<a>跳转都是以牺牲一定体验性为代价。

经过多番尝试,最后发现用下面的方法勉强解决了问题:

// 进入页面,控制自定义分享前,把当前页URL替换成进入页的URL(保证自定义分享正常)
this.setCurrentPage(location.href)
window.history.replaceState({}, document.title, this.landingPage)
wx.config()
wx.ready()

//...

// 离开当前页时,还原当前页的URL(保证返回正常)
beforeRouteLeave(to, from, next) {
  window.history.replaceState({}, '', this.currentPage)
  next()
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2018-07-05

vue-router两种模式区别及使用注意事项详解

本文实例讲述了vue-router两种模式区别及使用注意事项.分享给大家供大家参考,具体如下: Vue Router 是Vue官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认 hash 模式,还有一种是history模式. hash模式 hash模式的工作原理是hashchange事件,可以在window监听hash的变化.我们在url后面随便添加一个#xx触发这个事件. window.onhashchange = function(

浅谈vue项目4rs vue-router上线后history模式遇到的坑

此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

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

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

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

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

vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上,其次是路由模式的问题,部署到测试服务器上的需要是 history 模式,但是产品是用 electron + vue 开发的桌面应用,electron 硬性要求 vue-router 的路由模式是 hash 模式,所以命令行需新增一个配置项 mode ,mode 可选值有 history .hash

vue-router启用history模式下的开发及非根目录部署方法

 为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

vue-router的两种模式的区别

1.大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多 2.hash模式 vue-router默认的是hash模式-使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新

一文了解vue-router之hash模式和history模式

当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算).比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello.它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面. history模式 利用了 HTML5 History Interface 中新增的

Vue-Router模式和钩子的用法

上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧 模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支

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的HTML5 History 模式设置

VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少.本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方案. vue-router的HTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({ mode: 'history', routes: [...] }

详解如何去除vue项目中的#——History模式

使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:   这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申到

Vue Router history模式的配置方法及其原理

vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

在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

如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)

导读 本文主要是对connect-history-api-fallback库进行一次源码分析.connect-history-api-fallback是一个用于支持SPA History路由模式的nodejs库.阅读本文前,应对HTML5 History模式有一定程度的了解! 源码分析 /** * 前端需要开启history模式,而后端根据url并不知道前端在请求api还是在请求页面,如localhost:4200/home这种url,前端理所当然认为"我需要得到html,并跳转到首页"

vue router下的html5 history在iis服务器上的设置方法

首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

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

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

Vue项目history模式下微信分享爬坑总结

每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 技术要点 Vue,history 常见问题及说明 debug模式下报false 这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项: 是否成功绑定了域名(域名校验文件要能被访问到) 使用最新的js-sdk文件,因为微信会改部分api config方法的参数是否传正确了(拼写错误.大小写...) 需要使用的方法是否写

VUE的history模式下除了index外其他路由404报错解决办法

我们先来看下代码: location / { index index.html; root /dist; try_files $uri $uri/ /index.html; } try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配. 然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 内容扩展: 问题背景: vue-router 默认是hash