1、在一个组件里面

    mounted(){
          // 判断浏览器是否支持history
          if (window.history && window.history.pushState) {
            console.log(document.URL)
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
          }

        },
          methods:{
        goBack(){
          console.log("路由变化了")
          this.$router.replace({path: '/home'});
          //replace替换原路由,作用是避免回退死循环
        }
      },

vue-router
路由原理
在解析源码前,先来了解下前端路由的实现原理。 前端路由实现起来其实很简单,本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新。目前单页面使用的路由就只有两种实现方式: hash 模式 history 模式
1.在这里插入图片描述
www.test.com/#/ 就是 Hash URL,当 # 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。

History 模式是 HTML5 新推出的功能,比之 Hash URL 更加美观
在这里插入图片描述
在实例化 VueRouter 的过程中,核心是创建一个路由匹配对象,并且根据 mode 来采取不同的路由方式。

Logo

前往低代码交流专区

更多推荐