Второй дочерний элемент в конфигурации роутера Vue не отображается в режиме истории - PullRequest
Новая
       14

Второй дочерний элемент в конфигурации роутера Vue не отображается в режиме истории

0 голосов
/ 26 января 2020

При переходе на http://localhost: 8080 / blog я получаю ожидаемый ListPost загруженный компонент. Но если я добавлю :id (http://localhost: 8080 / blog / 2 ), я получу пустую страницу вместо SinglePost.

Проблема не в компоненте SinglePost. Компонент работает, и использование другого не устраняет его.

Проблема решена в hash режиме между прочим.

Вот код:

router.ts

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import ListPost from './components/ListPost.vue';
import SinglePost from './components/SinglePost.vue';
import Blog from './views/Blog.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: () =>
        import(/* webpackChunkName: "About" */ './views/About.vue'),
    },
    {
      path: '/blog',
      name: 'blog',
      component: Blog,
      children: [
        {
          name: 'articles',
          path: '',
          component: ListPost,
        },
        {
          name: 'article',
          path: ':id',
          component: SinglePost,
        },
      ],
    },
    {
      name: 'contact',
      path: '/contact',
      component: () =>
        import(/* webpackChunkName: "Contacts" */ './views/Contacts.vue'),
    },
    {
      path: '**',
      redirect: { path: '/' },
    },
  ],
});

export default router;

Blog.vue

<template>
  <main>
    <section>
      <router-view></router-view>
    </section>
  </main>
</template>
...