二维码扫码跳转&页面重定向-白红宇

标签： 二维码 页面重定向 vue 移动端 混合开发

总结

获取参数问题：微信扫码打开对应微服务时，以截取路径是否携带相关参数判断此时打开微服务方式(正常打开还是扫码打开)。基于vue，在mounted时调用方法，通过this.$route.query.params获取路由对应参数作为判断标准，结果跟预测的不一样，如果原来路由params为空，那么不管扫码还是正常打开，通过this.$route.query.params依旧为空。
- 解决办法：调用window.location获取url信息，再根据window.location.search //(返回url查询部分)获取参数。
- 原因：混淆vue前端路由所带参数与二维码url路径携带参数的概念。二维码携带url信息规则如xxx:meal.index.html#/home/80003040?params=...//params为二维码携带参数信息,80003040为vue路由携带参数信息。而一般vue中路由之间跳转携带参数一般是通过编程式导航this.$router.push({path:'home',query:{workId:xxx }})//vue中路由为/home?workId=xxx而扫码后url为xxx:meal.index.html/home(待验证)。

参数带@ * / : 等特殊符号问题：url参数带特殊符号会使得参数丢失或者获取参数失败。比如参数本身设计为一个重定向跳转地址，类似http://mc.meal.com/sf/xxx
- 解决办法：encodeURIComponent(url)对参数进行加密，转换特殊字符，获取参数解码调用decodeURIComponent(url)解码。
- 原因：首次遇到此类问题。

页面重定向问题：获取Url参数，解码参数Url后，前端进行页面重定向，问题：开始用ajax形式即vue中this.$axios.get/post(...)直接访问重定向url并且传递参数，重定向失败。
- 解决办法：直接在解码后的url拼接参数调用window.location.href=url方法跳转。
- 原因：重定向请求返回的不是json格式数据而是返回整个html页面即重定向展示的页面。