感觉这个作者写的很好,收藏一下地址 [高级]深入浅出浏览器的history对象 - 掘金

浏览器禁止页面回退 - 掘金 

禁止登录之后通过浏览器返回到登录页面

登陆成功用 router.replace 代替 router.push

编程式导航 | Vue Router

想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

rputer.replace的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。

禁止退出之后通过浏览器返回到之前的页面

退出功能页面

logout(){
   sessionStorage.clear();
   this.$router.push("/login");
 },     

退出后跳转到的页面 在要禁止回退页面的mounted( )方法中添加禁止浏览器的后退的方法   

触发后禁止浏览器的后退键

  history.pushState(null, null, document.URL);

   window.addEventListener("popstate",function(e) {  

        history.pushState(null, null, document.URL);

    }, false);

 在 HTML 文档中,history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state)

参考地址History.pushState() - Web API 接口参考 | MDN

Logo

前往低代码交流专区

更多推荐