vue返回首页后如何清空路由问题

 更新时间:2023年06月05日 14:58:44   作者:ジ Jing  
这篇文章主要介绍了vue返回首页后如何清空路由问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue返回首页后如何清空路由

需求一:从首页点击路由到A页面

  • A页面点击路由到B页面
  • B页面点击路由到C页面
  • C页面点击路由链接到D页面
  • D页面有个返回首页按钮

那么问题来了

点击返回首页后,再点击手机的返回键 会打开D页面 再按手机返回键 会打开C页面,依次类推,

如何才能实现点击返回首页后,清空路由呢

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        sessionStorage.clear();
        window.history.back();
    },
} 

禁止有返回记录

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        history.pushState(null, null, document.URL);
    },
} 

需求二:把浏览器的记录返回指定的页面

mounted 中:
 if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", _this.onClickLeft, false);  //_this.onClickLeft是返回的点击事件
    }
 methods: {
    onClickLeft() {
    //   this.$route.query.radio支付页面到指定页面传的参数 来判断他的路由
      if (this.$route.query.radio == 1 || this.$route.query.radio == 2) {
        this.$router.push({ //返回指定页面
        });
      } else {
        this.$router.go(-1);  // 正常返回
      }
    },
// 将事件清除掉
 destroyed() {
    window.removeEventListener("popstate", this.onClickLeft, false);
  }

vue路由缓存的灵活清空

vue的路由缓存,灵活清空,在页面离开时判断

beforeRouteLeave:function(to, from, next){
    // 增加离开路由时清除keep-alive
    //rank写在router.js的路由meta里面,用来判断rank信息,可自由更改
    if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank)
    {//此处判断是如果返回上一层,你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
        if (this.$vnode && this.$vnode.data.keepAlive)
        {
            if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
            {
                if (this.$vnode.componentOptions)
                {
                    var key = this.$vnode.key == null
                                ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                : this.$vnode.key;
                    var cache = this.$vnode.parent.componentInstance.cache;
                    var keys  = this.$vnode.parent.componentInstance.keys;
                    if (cache[key])
                    {
                        if (keys.length) {
                            var index = keys.indexOf(key);
                            if (index > -1) {
                                keys.splice(index, 1);
                            }
                        }
                        delete cache[key];
                    }
                }
            }
        }
        this.$destroy();
    }
    next();
},

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue element 关闭当前tab 跳转到上一路由操作

    vue element 关闭当前tab 跳转到上一路由操作

    这篇文章主要介绍了vue element 关闭当前tab 跳转到上一路由操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue实现图片预览效果实例(放大、缩小、拖拽)

    Vue实现图片预览效果实例(放大、缩小、拖拽)

    现在项目中有这样的一个需求,对上传的图片可以点击之后在线预览,这篇文章主要给大家介绍了关于Vue实现图片预览效果实例(放大、缩小、拖拽)的相关资料,需要的朋友可以参考下
    2021-05-05
  • 详解Electron中如何使用SQLite存储笔记

    详解Electron中如何使用SQLite存储笔记

    这篇文章主要为大家介绍了Electron中如何使用SQLite存储笔记示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 详解uniapp如何解决H5页面双标题

    详解uniapp如何解决H5页面双标题

    Uniapp打包到线上,会出现双标题问题,原因是:通过地址链接访问时,会有个浏览器自身的标题,和uniapp自身的导航栏标题重复,本文给大家介绍了uniapp如何解决H5页面双标题,需要的朋友可以参考下
    2024-10-10
  • vue中使用js-doc的案例代码

    vue中使用js-doc的案例代码

    这篇文章主要介绍了vue中使用js-doc的相关知识,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue-router 源码实现前端路由的两种方式

    vue-router 源码实现前端路由的两种方式

    这篇文章主要介绍了vue-router 源码实现前端路由的两种方式,主要介绍Hash 路由和History 路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解Vue中如何避免滥用watch

    详解Vue中如何避免滥用watch

    这篇文章主要为大家详细介绍了Vue中滥用watch带来的问题以及如何解决,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • el-form表单el-form-item label不换行问题及解决

    el-form表单el-form-item label不换行问题及解决

    这篇文章主要介绍了el-form表单el-form-item label不换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3中实现文本显示省略号和tooltips提示框的方式详解

    vue3中实现文本显示省略号和tooltips提示框的方式详解

    在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下
    2024-04-04
  • Element树形控件el-tree懒加载并设置默认展开和选中的效果

    Element树形控件el-tree懒加载并设置默认展开和选中的效果

    本文主要介绍了Element树形控件el-tree懒加载并设置默认展开和选中的效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01

最新评论