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

Question

[Август Милович]

Делаю простое todo, есть такая структура папок:

--board.vue
--menu.vue

В board.vue по идее должна выводиться доска со списками todo, переключая в menu.vue на другу доску, она отображается снова в board.vue. Я бы мог создать каждую доску как компонент, но задумывается возможность создавать новую доску, а новый компонент создать нельзя. Поможет ли вообще vue-router в этом вопросе, или придется менять данные в компоненте board.vue через $store? Если я ошибаюсь, то как мне всё это организовать?

Answer 1

[alstin]

Как то так

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

Comments

[Август Милович]

Ну хорошо, это то понятно, а как мне создать board02? Это основная проблема

[alstin]

Август Милович, хорошо я переписал ответ что бы вообще было идеально

[Август Милович]

alstin, Боже, я наверное неправильно вопрос написал, есть кнопка, нажимаю на кнопку, появляется новая доска, допустим board03. Изначально у меня только board01, пользователь же может создать хоть до board10000. Что же мне, 10000 board регистрировать. Как то так

[titelhalter]

Август Милович, Во vue router Вы можете создавать пути с параметрами, например:

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

В самом шаблоне

<li><router-link :to=`/board/${нужный id}`>Board02</router-link></li>

Внутри компонента board можно получить значение параметра
$router.currentRoute.params.id

По значению этого параметра получайте данные для построения доски. Либо с сервера, либо храните данные в localStorage, либо еще как-то

[Август Милович]

titelhalter, спасибо ббольшое, не могли бы вы написать это в ответ)

[titelhalter]

Не за что. Опубликовал в ответе

Answer 2

[titelhalter]

Август Милович, Во vue router Вы можете создавать пути с параметрами, например:

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

В самом шаблоне

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

Внутри компонента board можно получить значение параметра
$router.currentRoute.params.id

По значению этого параметра получайте данные для построения доски. Либо с сервера, либо храните данные в localStorage, либо еще как-то