今天在做一个页面上下载的功能,遇到了一个问题
就是在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配置 之后再写一篇吧
有问题 欢迎留言