Question

我有多个选择框。通过使用

，每个选定的值都将显示在vue路由中

this.$router.push({path:someValue,query:queryObject})

某些选择的值将成为路径的一部分，而某些值将成为查询的一部分。所选值将存储在vuex存储中。因此，当您选择一个选择框的值时，将执行一次提交，然后，将更新vue路由对象。当然，用户可以使用浏览器历史记录按钮向后或向前导航。在这种情况下，需要通过URL中的当前值来更新选择框。我使用 window.onpopstate ：

 watch: {
   $route(to, from) {
       window.onpopstate = function(e) {
          /* check what exactly has changed in the route object and update the corresponding selectbox */
          if(to.params.pathMatch !== from.params.pathMatch){
             // check and update select-box
          }
       }
   }

现在在我的测试文件中，我试图模仿用户按下浏览器导航按钮向后导航时的情况。我想检查选择框是否正确更新。我以这种方式尝试

 it('Updates select-box after history button has been pressed backwards', () => {
      // this here works fine the route object is updated
      cmp.vm.router.push({path:"Hello",query:{name:"Jonny"}})

      console.log(cmp.vm.route) // prints "/Hello?name=Jonny"

      cmp.vm.router.push({path:"Hello",query:{name:"Peter"}})

      console.log(cmp.vm.route) // prints "/Hello?name=Peter"

      // Now I want to navigate backwards so that the query param name will be Jonny but it's not working

      window.history.back(); // not working
      cmp.vm.router.go(-1) ;    // not working
      const event = { test: 'mock' };
      window.onpopstate(testEvent); // not working


 });

console.log(cmp.vm.route) // prints "/Hello?name=Peter" 但它应该打印/Hello?name=Jonny"

那么我该如何在玩耍的时候在vue-test-utils中向后模仿历史呢？

带有玩笑的vue-test-utils中的历史记录不起作用

0 个答案: