CodeInMyHeart
@CodeInMyHeart
SOS

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

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

--board.vue
--menu.vue

В board.vue по идее должна выводиться доска со списками todo, переключая в menu.vue на другу доску, она отображается снова в board.vue. Я бы мог создать каждую доску как компонент, но задумывается возможность создавать новую доску, а новый компонент создать нельзя. Поможет ли вообще vue-router в этом вопросе, или придется менять данные в компоненте board.vue через $store? Если я ошибаюсь, то как мне всё это организовать?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 2
@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>
Ответ написан
@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, либо еще как-то
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы