Маршрутизация к отдельным блогам в Vue

Сценарий

Мы завершили список наших блогов.

Когда мы нажимаем на ссылку блога, мы хотим отобразить ее.

Подход

Ссылки

Сначала добавьте эти две ссылки на блог в нижнюю часть шаблона BlogsComponent, чтобы он выглядел так:

<template>
<div>
   <div v-for="blog of blogs" :key="blog.title">
      <h1>{{ blog.title }}</h1>
      <p>{{ blog.content }}</p>
   </div>
   <router-link to="/blogs/0">The First Blog</router-link>
   <router-link to="/blogs/1">The Second Blog</router-link>
</div>
</template>

Компонент блога

В папке src/components/ создайте файл BlogComponent.vue . Сделайте так, чтобы это выглядело так:

Маршрутизатор

Обновите src/router/index.js, чтобы он выглядел так:

import Vue from 'vue'
import Router from 'vue-router'
import BlogsComponent from '@/components/BlogsComponent'
import BlogComponent from '@/components/BlogComponent'
Vue.use(Router)
routes: [
  {
    path: '/',
    name: 'BlogsComponent',
    component: BlogsComponent
  },
  {
    path: '/blogs/:id',
    name: 'BlogComponent',
    component: BlogComponent
  }
]

Запустите npm run dev и посетите http://localhost:8080 . Теперь вы должны иметь возможность переходить к отдельным сообщениям в блоге.

Представлено