VueJS aplikacja

Question

Witam piszę aplikację SPA w VueJS cli. Struktura strony wygląda następująco:

Strona startowa (dostępna po /) jest wstępem do aplikacji, posiada przycisk, który ładuje prawdziwą stronę wraz ze wszystkimi możliwościami (docelową aplikację).

Docelowa aplikacja posiada menu (dostępne na każdej stronie POZA strony startowej, która owego menu nie posiada).

Jak mam zabrać się za pisanie takiej strony? Głównie chodzi mi to o stronę startową w app.vue definiuje router, czyli to co powinno wyświetlić się na każdej stronie. Jak zdefiniować osobno dla strony startowej? Niestety, ale nie bardzo wiem jak to opisać. Druga sprawa, to chciałbym aby po kliknięciu na button na stronie startowej załadowała się zawartość docelowej aplikacji z efektem FadeIn/FadeOut, oraz manipulacją szerokości diva, jak mam wykonać owy efekt? Czy takie efekty należy tworzyć w css, czy bezpośrednio w VueJS?

Answer 1

Jeżeli nawigacja ma być na każdej stronie poza stroną pod "/" to możesz sprawdzić za pomocą v-if czy strona jest stroną startową i wyświetlić tą nawigacje. Inne informacje, które mają się zmieniać po prostu za pomocą view-router.

Animację "w Vue.js" to i tak animację w CSS, a przynajmniej jest to jeden ze sposobów animacji. Vue ma dobrą dokumentację, więc tam wszystkiego się dowiesz jak powinno się animować takie rzeczy.

Comments

Czyli sprawdzam, czy strona to strona główna za pomocą v-if, jeśli tak to wyświetlam stronę startową, a za pomocą v-else, gdy nie jest?

v-if definiuje w routingu?

---

Zrobiłbym to tak, że tam gdzie tworzysz aplikację Vue, główny komponent (nie wiem jak to nazwać), to tworzysz w template:

<template>
  <div>
    <nav v-if="this.$router.path !== '/'"></nav>
    <router-view></router-view>
  </div>
</template>

Nie jestem pewny czy this.$router zadziała w template, ale na pewno jest jakiś sposób na wyciągnięcie ścieżki. Kwestia sprawdzenia.