Настройте роутер для подстраниц в Vue.js - PullRequest
Новая
       6

Настройте роутер для подстраниц в Vue.js

0 голосов
/ 28 февраля 2019

Мне интересно, как лучше настроить маршрутизатор в Vue.js для обработки «подстраниц».Например, я получил навигационную панель, которая перенаправляет на разные страницы.С одной из этих страниц я хочу иметь ссылки на подстраницы.Как мне лучше всего это настроить?

Я сделал так:

App.js 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

ТогдаЯ настроил свой роутер: 

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About,
      children: [
        {
          path: "/child1",
          name: "child1",
          component: Child1
        }
      ]
    }
  ]
})

И мое About.vue, где я предоставляю ссылку на Child1 

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-link to="/child1">Child1</router-link>
    <router-view></router-view>
  </div>
</template>

И наконецmy Child1.vue 

<template>
  <div class="child1">
    <p>My message</p>
  </div>
</template>

Моя проблема заключается в том, что ссылка на Child1 отображается как на странице About, так и на странице Child1.Я просто хочу отобразить его на странице about, и только содержимое Child1 на странице Child1

Как лучше всего настроить подобные вещи?

Спасибо

1 Ответ

0 голосов
/ 28 февраля 2019

Моя проблема в том, что ссылка на Child1 отображается как на странице About, так и на странице Child1.Я просто хочу отобразить его на странице about

Просто чтобы прояснить, что здесь происходит: ссылка на Child1 всегда видна в компоненте About, даже если дочерние маршруты активны, но вы не хотитепоказать ссылку, когда дочерний маршрут активен.

Путь 1

Вы можете предоставить запасной контент для <router-view>, когда нет соответствующего маршрута (то есть, когда нетдочерний маршрут активен).Это была бы хорошая возможность показать ссылку. 

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-view>
      <router-link to="/child1">Child1</router-link>
    </router-view>
  </div>
</template>

Способ 2

Приведенное выше решение может не работать, если ваш шаблон более сложный и если вы хотитерасположить ссылку в другом месте шаблона.

Таким образом, вам придется вручную контролировать видимость ссылки, используя v-if, чтобы она была видна только тогда, когда дочерний маршрут не активен. 

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <!-- Show only when no child routes are active -->
    <router-link v-if="$route.name === 'about'" to="/child1">Child1</router-link>

    <!-- Or, do not show when Child1 route is active -->
    <router-link v-if="$route.name !== 'child1'" to="/child1">Child1</router-link>

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