[Vue.js] ネストしたRouteで、親ルート以下の場合activeクラスを付与する

<template>
  <ul>
    <li v-for="page in pages">
      <router-link :to="page.route" v-bind:exact="page.exact">
        <span>{{page.title}}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>

export default {
data() {
  return {
    pages: {
      page1: {
        route: {name: 'ParentChild1'}},
        title: '子ページ',
        exact: false, 
      },
      page2: {
        route: {name: 'Parent'}},
        title: '親ページ',
        exact: true, // trueじゃないと、子ページルート時にもactiveになる
      },
      page3: {
        route: {name: 'ParentChild2'}},
        title: '子ページ2', //このページ内でさらに子子ルートをネストしている
        exact: false,
      }    
    }
  }
}
}
</script>
<style>
.router-link-active{

}
</style>

Vue Routerは、デフォルトでactiveクラスを付与してくれますが、ルートを親子ネストしている場合、完全一致（router-link-exact-active）では子ルート内でさらにネストした場合に子ルートがactiveにならず、部分一致（router-link-active）だと子ルートの時に親ルートもactiveになってしまいます。しかし、「exact」を付与することで、activeの表示を制御でき、子ルート内でさらにネストしたタブ表記などにも対応できます。

参考： API リファレンス | Vue Router