vue单页项目中判断有没有上一页

场景：判断一个页面有没有上一页，没有就关闭页面，有的话就返回上一页

测试了多种方法后，最后用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添加进sessionStorageif (!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);

完啦，问题是不是解决啦？

vue单页项目中判断有没有上一页相关推荐

vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页与 A页面来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
小程序判断是否有上一页
小程序判断是否有上一页做法:重点是用getCurrentPages()这个方法 //返回按钮 <view bindtap='navback'></view> //js方法 na ...
html页面中使用 JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面
html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面. 常用方法: window.history.go(-1); //返回上一页 window.histo ...
elementUI分页删除最后一页数据时跳转回上一页并且el-table序号递增
elementUI分页删除最后一页数据时跳转回上一页 queryParams: {current: 1,//当前页数size: 10,//每页条数channel: undefined,}, const ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
前端项目中判断两个对象value值是否相等
项目中的实例看上图知道,点击了支付时,验证了选中行的主体信息,不一致就给提示信息,一致就出现弹框(这里弹框没有写) 那么我们就要在循环遍历的基础上,判断选中的行信息的某个值是否相等. 也就是判断 ...

vue单页项目中判断有没有上一页

vue单页项目中判断有没有上一页相关推荐

最新文章

热门文章