二维码扫码跳转&页面重定向
标签： 二维码 页面重定向 vue 移动端 混合开发
总结
-
本质：手机app扫码本质是访问二维码携带对应链接。 部分app对相关二维码可以定制一定的规范，比如用丰*App扫定制二维码，会打开对应微服务（H5）指定页面 url中的参数携带特殊符号需要encode加密处理。
踩过的坑
-
解决办法：调用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页面即重定向展示的页面。 备注：个人记录，如内容有误的地方，欢迎批评指正
