How to organize navigation through vue-router?

Question

Vue.js

I'm doing a simple todo, there is such a folder structure:
--board.vue
--menu.vue
In board.vue, in theory, a board with todo lists should be displayed, switching to menu.vue on another board, it is displayed again in board.vue. I could create each board as a component, but I'm thinking of creating a new board, but you can't create a new component. Will vue-router help in this matter at all, or will I have to change the data in the board.vue component through $store? If I'm wrong, how can I organize all this?

Answer 1

Something like this

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