vue单页项目中判断有没有上一页
场景:判断一个页面有没有上一页,没有就关闭页面,有的话就返回上一页测试了多种方法后,最后用window.sesstionStorage 结合router.afterEach实现了。我解决的思路:1)用window.history.length,如果 =1则是关闭页面,否则是返回上一页。最后发现history.length只增不减,它只记录你一共看了多少个页面;放弃;2)用document.refe
·
场景:判断一个页面有没有上一页,没有就关闭页面,有的话就返回上一页
测试了多种方法后,最后用window.sesstionStorage 结合router.afterEach实现了。
我解决的思路:
1)用window.history.length,如果 =1则是关闭页面,否则是返回上一页。最后发现history.length只增不减,它只记录你一共看了多少个页面;放弃;
2)用document.referrer.它的值为url,当前页面就是从这个 url 所代表的页面跳转或打开的.但是我发现我的项目中document.referrer都为’‘,原来单页应用的document.referrer都为’'。这条路也走死了。
我发现现有的API不能解决这个问题,不能判断这是不是打开的第一个页面,有没有上一页这个问题。
关键来了
我的解决方法:
用sessionStorage记录打开的第一个页面的url,并结合后置全局导航守卫router.afterEach来实现:
具体步骤:
- 在入口js中配置一个router.afterEach,它是全局的后置钩子函数,该函数会在每次路由切换成功进入激活阶段时被调用。在触发时(每次进入页面时)判断sessionStorage有没有记录firstUrl的值,没有记录说明是第一次进入页面,就记录,代码如下:
router.afterEach((to, from) => {
// 当页面为打开的第一个页面时,url添加进sessionStorage
if (!window.sessionStorage.firstUrl) {
window.sessionStorage.firstUrl = window.location.href
}
})
- 每个页面点击返回封装为一个函数goBack,返回时判断现在的url是否和sesstionStoraged 的firstUrl相等,(判断整个url而不是只判断路由名,因为可能因为参数不同实现的不同的业务逻辑哦) 它们相等则说明是第一个页面。具体代码如下:
goBack () {
// 相等说明是首页
if (window.sessionStorage.firstUrl === window.location.href) {
obj.closeWin() // 这里我是和原生交互的,closeWin可以直接关闭H5窗口
} else {
window.history.go(-1)
}
},
以上是手动点击是返回,手势返回也需要用同样的逻辑,以下是手势返回的代码:
window.addEventListener("popstate", function(e) {
goBack()
}, false);
完啦,问题是不是解决啦?
更多推荐
已为社区贡献4条内容
所有评论(0)