VUE ROUTER

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: "/index.html",
      name: "index",
      redirect: '/',
    },
    {
      path: "/",
      name: "Home",
      component: () => import( './views/Home/Index.vue'),
    },
    {
      path: "/:categories(code|note|author)",
      name: "CategoryTop",
      component: () => import( './views/Categories/Detail.vue'),
    }
  ]
})

<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>