vue如何控制浏览器前进后退操作

心已赠人 2024-04-18 18:27 72阅读 0赞

公司cms后台系统，导航功能比较复杂，点击浏览器后退按钮，发现路由改变，顶部还有左侧导航未改变，导航如下图，经查阅先找到一种可行的方法，问题已解决。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70][]

在default.vue中加入如下代码：

具体操作如下：

1.挂载完成后，判断浏览器是否支持popstate

mounted(){
         if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.cancel, false);
      }
      },

2.页面销毁时，取消监听。否则其他vue路由页面也会被监听

destroyed(){
      window.removeEventListener('popstate', this.cancel, false);
      }

3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写

cancel: function() {
        if(this.orderId){
            this.$router.push({
                name:"orderList",
                params: {id:this.orderId},
                    });
          }else{
          this.$router.go(-1);
          }
     
      },

注：cancel方法中的处理可根据自己的业务需要来写，上述方法仅供参考，步骤1,2中的方法可以照搬。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6745d7675b184b848a5b23f323e69453.png

发表评论取消回复

表情：

评论列表（有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue如何控制浏览器前进后退操作

公司cms后台系统，导航功能比较复杂，点击浏览器后退按钮，发现路由改变，顶部还有左侧导航未改变，导航如下图，经查阅先找到一种可行的方法，问题已解决。 ![waterm...

心已赠人/ 2024年04月18日 18:27/ 0 赞/ 73 阅读

相关 pycharm前进、后退快捷键

[https://blog.csdn.net/jamieblue1/article/details/89087064][https_blog.csdn.net_jamiebl

悠悠/ 2022年12月25日 00:49/ 0 赞/ 184 阅读

相关 ivew+vue实现表单设计器--前进后退操作（三）

操作前进、后退操作，这个功能比较重要，而且必须提前设计后，不然后面再来兼容这个功能就比较麻烦。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

桃扇骨/ 2022年12月23日 06:57/ 0 赞/ 124 阅读

相关栈实现浏览器的前进和后退功能

一概述当你一次访问完一串页面a-b-c之后，点击浏览器的后退按钮，就可以查看之前浏览过的页面b和a。当你后退到页面a，点击前进按钮，就可以重新查看页面b和c。但是，如

╰+哭是因爲堅強的太久メ/ 2022年12月11日 13:47/ 0 赞/ 138 阅读

相关 ajax技术如何解决浏览器前进后退按键失效的问题

Q:ajax技术，很强大，但ajax应用中容易导致浏览器的前进后退按钮失效，不产生前进后退功能，这是个很头疼的问题，它严重的破坏了用户美好的体验，如何解决Ajax过程中导致的浏

待我称王封你为后i/ 2022年08月19日 08:46/ 0 赞/ 462 阅读

相关通过electron的webView使用按钮控制前进后退

HTML页面如下,使用electron中的webView来进行网页的浏览，然后在总体的html文件中添加两个按钮，前进和后退，布局的话看自己喜欢的位置。 <!DOCT

超、凢脫俗/ 2022年06月03日 04:20/ 0 赞/ 805 阅读

相关 Jquery禁止浏览器的前进后退

jQuery(document).ready(function () { if (window.history && win

梦里梦外;/ 2022年04月05日 16:54/ 0 赞/ 314 阅读

相关 JS-禁用浏览器前进后退

使用jQuery： <script type="text/javascript" language="javascript"> 　　$(document).r

Dear 丶/ 2021年12月12日 02:19/ 0 赞/ 370 阅读

相关 Vue路由判断前进后退

判断方式应该有很多，但是我感觉最简单的方式，也是我项目中采用的方式：定义全局跳转和返回函数，直接“接管”Vue路由的前进和后退事件： //注册全局方法

梦里梦外;/ 2021年11月05日 07:52/ 0 赞/ 1116 阅读

相关 Day4 栈：浏览器的前进和后退

主题：使用栈实现浏览器的前进和后退功能问：什么是栈？答：栈是一种操作受限的线性表，具有后进先出的功能问：栈的实现方式有哪些？

客官°小女子只卖身不卖艺/ 2021年09月18日 04:48/ 0 赞/ 353 阅读