Как организовать навигацию через vue-router?

//route.js
import Vue from 'vue'
import Router from 'vue-router'

import board from './views/board.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  hashbang: false,
  base: process.env.BASE_URL,
  root: '/',
  routes: [
       {
      path: '/board01',
      name: 'Board01',
      component: board
    },
    {
      path: '/board02',
      name: 'Board02',
      component: board
    }
]
})

<!--menu.vue-->
<template>
<ul>
      <li><router-link :to="`/board01`">Board01</router-link></li>
      <li><router-link :to="`/board02`">Board02</router-link></li>
 </ul>
</template>

<!-- board.vue -->
<template>
  <div>
    <div v-if="this.$route.path === '/board01'">
      <h2>Todo 1</h2>
      <ul>
        <li>task 1</li>
        <li>task 2</li>
      </ul>
    </div>
    <div v-if="this.$route.path === '/board02'">
      <h2>Todo 2</h2>
      <ul>
        <li>task 1</li>
        <li>task 2</li>
      </ul>
    </div>
  </div>
</template>

{
  path: '/board/:id',
     name: 'Board',
     component: board
}

<li><router-link :to=`/board/${нужный id}`>${Имя доски}</router-link></li>