美文网首页
Vue中的浏览器后退前进

Vue中的浏览器后退前进

作者: 叶叶叶xxx | 来源:发表于2019-05-24 18:41 被阅读0次

    项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在vue中浏览器的前进和后退

    一、后退功能

    vue中的后退有好多种方法可以使用,使用这些方法前要确认有之前的页面,否则后退就到了一个空页面!

    可以通过history.length来获取历史记录的长度

    console.log(history.length)
    
    1.window.history对象中保存有页面访问的历史记录,在编写时可不使用 window 这个前缀。 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的
    window.history.back();   //后退1步
    history.back();          //后退1步
    
    2.this.$router.go(-1); 通过vue的路由来进行后退1步
    this.$router.go(-2); //后退2步
    this.$router.back(); //后退1步
    
    二、前进功能

    可以通过history.forward(); 来加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的,使用前需要确认有下一个URL,否则没反应~

    相关文章

      网友评论

          本文标题:Vue中的浏览器后退前进

          本文链接:https://www.haomeiwen.com/subject/kuvnzqtx.html