vue路由器历史模式页面重新加载

Question

如何在散列模式和历史模式下实现相同的断点（调用相同的函数）？

当我阅读https://router.vuejs.org/en/essentials/history-mode.html

时

  

我们可以使用路由器的历史记录模式，该模式利用history.pushState API实现URL导航而无需重新加载页面

我认为无论路由器处于何种模式，URL都会重新加载我的页面 - 在哈希模式和历史模式下 - 基本上我的页面将表现相同

我的页面打开如下：

www.example.com

当我在浏览器中输入新网址并按Enter键时（我想将新网址用作搜索查询）

在散列模式下

：

www.example.com/#/action comedy 1080p 2017

只有breakpoint1和breakpoint2被命中，字符串newVal == "action comedy 1080p 2017" - 它按预期工作

但在历史模式中：

www.example.com/action comedy 1080p 2017

断点1和断点2未被命中，但是breakpoint3，breakpoint4，breakpoint5，breakpoint6被命中 - 我的页面不能正常运行

我可以在两种模式下实现相同的功能吗？

谢谢你！

const router = new VueRouter({
  //mode: 'history',
  routes: [
    { path: '/:question' }
  ]
})

var app = new Vue({
    el: '#app',
    router,
    watch:{
      '$route.params': function (newVal, oldVal){
        alert("breakpoint1");
      },
      '$route.params.question': function(newVal, oldVal){
        alert("breakpoint2");
      }
    },
    beforeCreate(){
      alert("breakpoint3");
    },
    created(){
      alert("breakpoint4");
    },
    beforeMount(){
      alert("breakpoint5");
    },
    mounted(){
      alert("breakpoint6");
    },
    beforeUpdate(){
      alert("breakpoint7");
    },
    updated(){
      alert("breakpoint8");
    }
  });