VUE微信公众号开发 ios端 复制链接 以及 新窗口打开之坑

今天在做一个页面上下载的功能,遇到了一个问题

就是在ios端微信浏览器打开项目的页面,然后进入到其中的某一个页面,复制链接到剪贴板后,永远是进入的项目首页,

我一开始看了一些文章,有人提出,是因为vue router的模式为hash 所以自动检测到#号 然后只截取了“#”前半部分

在浏览器打开也是一样的道理


于是我就信以为真了,在路由里改成了history模式

然后又在服务器的nginx配置里 加了个80端口监听的服务器404跳转定向的设置;

配置好了服务器 项目也打包了发布了。

访问的页面也没有了#号,本来以为一切即将万事大吉,然后打开ios复制了一下页面

咦?页面地址依然不对!!!!!

然后继续打开百度 发现问题好像是ios微信浏览器 只会记录第一次的url

原因是 vue history的单页面应用的机制 路由打开一个新的页面后 页面并没有真正的走http请求 

因此浏览器也只会记录第一次访问的页面。

搞清楚这个原因了,那就好办了

目前搜集了两个方法 都不错,因为我只考虑下载页面这一个页面的复制链接的功能

所以我只需要在相应的页面 created钩子里 使用 replace() 方法 就可以解决这个问题,

为了不造成页面不停刷新的问题,所以我做了这样的处理

    let DLhref = window.location.href

        if (DLhref.indexOf('&replace=1') <= -1) {

            window.location.replace(DLhref+'&replace=1')

        }



还有一种方法 是在路由里 设置路由守卫,

router.beforeEach((to, from, next) =>{

    if (to.path !== global.location.pathname) {

        location.assign(to.fullPath)

    }

    next()

}) 

这两种放在都可以解决这样的问题;

关于 history模式的 nginx配置 之后再写一篇吧

有问题 欢迎留言

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。