• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

vue返回上一页会跳出本站?没有上一页怎么跳转到首页?

代码笔记 barben 4年前 (2020-03-13) 3639次浏览 1个评论

今天做手机端左上角回退按钮的时候,解锁了一个很绝望的操作:
如果我在其他页面直接输入地址访问我的项目后,在项目中点击回退,又会直接跳回那个网页。
这和浏览器的回退功能有什么区别!!!手机端网站不都是如果没有上一页就会跳回首页吗???

// 使用vue-router的回退方法go和back都会出现这种情况
this.$router.go(-1);
this.$router.back(-1);

参考思路:
在临时存储(sessionStorage)中设置一个变量,类型为数组,用于记录每一次路由的变化。
用户每进行跳转,都向这个数组的开头插入上一个页面的url。
用户每次点击后退按钮时,先将页面跳转到这个数组开头的url,再将这个url从数组中删除。
从而实现返回上一页功能

注意:
1.无论什么url,只要是首次进入或者刷新页面,返回上个页面的path属性永远都是”/”
2.首页不应设置后退按钮

代码如下

export default {
  data() {
    return {
      historyUrl: sessionStorage.historyUrl ? JSON.parse(sessionStorage.historyUrl) : [],
      backFlag: false, // 记录本次路由更新是否为用户的后退操作
    }
  },
  methods: {
    goBack() { // 返回按钮的click事件
      this.backFlag = true; // 设置本次页面跳转为后退跳转,让本次跳转不写进historyUrl记录中
      this.$router.push(this.historyUrl[0]);
      this.historyUrl.splice(0,1);
    }
  },
  watch: {
    '$route'(to, from) {
      // 记录历史访问页面 -- Start
        if(!this.backFlag) { // 不是用户主动后退导致的路由跳转
          if(from.path != this.historyUrl[0]) { // 避免连续写入两个同样的url
            if(this.historyUrl.length > 0 && from.path == "/") {
              // 如果历史访问地址已经有数据了,而且识别到上一页面为"/",很有可能是用户刷新导致进入的判断,所以不写入
            } else {
              this.historyUrl = [from.path, ...this.historyUrl]; // 在historyUrl的开头插入一个历史访问地址
            }
          }
        } else {
          this.backFlag = false; // 本次由于是用户主动后退,不进行记录。但还原此标记,使下一次触发路由跳转能够正常判断。
        }
        sessionStorage.historyUrl = JSON.stringify(this.historyUrl); // 页面每次发生跳转,都将历史访问地址写进临时存储中,方便刷新后的读取
      // -- End
    }
  }
}

 


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
vue返回上一页会跳出本站?没有上一页怎么跳转到首页? - https://www.barben.cn/code/701.html
喜欢 (6)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
成功捕捉到了 1 只稀有精灵
  1. 写到路由守卫里
    杠精2020-03-18 12:58 回复