一、匹配当前路由

使用<RouterLink>，且路徑相符時，渲染出來的<a>會自帶有2種className：
router-link-active → 相關的path(父層祖層)都有此className
router-link-exact-active → 完全一致的才有此className

  const routes = [
    {
      path: '/about',
      name: 'about',
      component: AboutView,
      children: [
        {
          path: ':id',
          name: 'about-detail',
          component: AboutDetail,
        }
      ]
    },
  ],

當進入 /about/99，
<a href=”/about”> className會有router-link-active
<a href=”/about/id”> className會有router-link-active, router-link-exact-active

若路徑帶有query並不影響className的產生
ex: /about/99?tab=test

二、不同的歷史記錄模式

createWebHashHistory()
createMemoryHistory()
createWebHistory()  // 推薦用這個