Vue RouterでURL変更後になにかしたいときは Vue.nextTick() を使うといいという話

Vue Routerのrouter.afterEachでwindow.locationを使う場合は Vue.nextTick() を使わないと期待した結果が返ってこないかもよという話。

確認手順

1. 下のようなrouterを定義して、 `/?foo` と `/?bar` のAnchorリンクをHTMLに書いておく

import Vue from "vue";
import Router from "vue-router";
import Home from "../components/Home";

Vue.use(Router);

const router = new Router({
  mode: "history",

  routes: [
    {
      path: "/",
      component: Home,
      props: (route) => ({ name: route.query.name })
    }
  ]
});

router.afterEach(() => {
  console.log("A", window.location.href);
  Vue.nextTick(() => console.log("B", window.location.href));
});

export default router;