vue & $router & History API

vue & $router

gotoTemplateManage(e) {
      e.preventDefault();
      this.$router.push({
        path: `/operate-tool/select-seat-system/template-manage`,
      });
      // this.$router.replace({
      //   path: `/operate-tool/select-seat-system`,
      // });
    },

Browser History API

https://developer.mozilla.org/en-US/docs/Web/API/History_API

window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`);
}

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");

history.back();
/ alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back();
// alerts "location: http://example.com/example.html, state: null"
history.go(2);
// alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

---

vue router push & replace

https://router.vuejs.org/guide/essentials/navigation.html

https://router.vuejs.org/api/#router-link