vue 中怎么监听路由的变化

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 来采取不同的路由方式。