Vue.js <router-view/> widok domyślny

Question

Witam, mam taki kod

<template>
<div>
    <nav>
      <router-link to="inf/page-one"></router-link>
      <router-link to="inf/page-two"></router-link>
    </nav>

    <router-view/>
  </div>
</template>

router.js

{
      path: '/inf',
      name: 'Inf',
      component: Inf,
      children: [
        {
          path: '/inf/page-one',
          name: 'PageOne',
          component: PageOne
        },
        {
          path: '/inf/page-two',
          name: 'PageTwo',
          component: PageTwo
        }
      ]
    }

i teraz jeśli przejdziemy pod '/inf' zostanie nam wyświetlona tylko nawigacja, wiadomo po kliknięciu w link wyświetli się PageOne lub PageTwo po nawigacją. Teraz, jak zrobić aby po przejściu po '/inf' domyślnie była wyświetlana PageOne a po kliknięciu w PageTwo, PageOne znika i zostaje załadowana PagaTwo

Answer 1

Nie znam Vue, ale zauważ, że dla path /inf masz przejście do komponentu Inf, a nie do PageOne więc dlaczego oczekiwałbyś przejścia do PageOne? Daj tam PageOne albo pobaw się z redirect.

Coś na wzor:

{
      path: '/inf',
      name: 'Inf',
      component: PageOne, // tu zmiana!
      children: [
        {
          path: '/inf/page-one',
          name: 'PageOne',
          component: PageOne
        },
        {
          path: '/inf/page-two',
          name: 'PageTwo',
          component: PageTwo
        }
      ]
    }

 

Comments

Nie o to mi chodzi, jak zrobię

  path: '/inf',
      name: 'Inf',
      component: PageOne, // tu zmiana!

ta cały widok zostanie zastąpiony komponentem OnePage a chodzi żeby tylko router-view miał domyślny widok