Jednostránkové aplikace s Vue.js a Flask:Navigace Vue Router

Vítejte u druhého příspěvku o používání Vue.js a Flask pro kompletní vývoj webu. Hlavním tématem tohoto článku bude Vue Router, ale budu se také zabývat direktivou v-model, stejně jako metodami Vue a vypočítanými vlastnostmi. Jak bylo řečeno, vezměte si něco s kofeinem a konzumujte nějakou dobrotu Vue. Kód tohoto příspěvku je na mém GitHubu.

Obsah seriálu

  1. Nastavení a seznámení s VueJS
  2. Navigace Vue Router (jste zde)
  3. Správa státu se společností Vuex
  4. RESTful API s Flask
  5. Integrace AJAX s REST API
  6. Ověření JWT
  7. Nasazení na virtuální privátní server

Seznámení s Vue Router

Stejně jako většina ostatních aspektů rámce Vue.js je použití Vue Routeru k navigaci na různých stránkách a následných komponentách strašně snadné.

Aside 1 – Samostatné instance Vue a vue-router

Některá témata prezentovaná v tomto příspěvku budou nejlépe popsána pomocí menších příkladů hraček, takže se někdy vyskytnou chvíle, kdy to udělám stranou. Kromě toho předvedu, co je potřeba pro spuštění samostatné instance Vue a routeru. Zatímco Vue je naprosto fenomenální pro vytváření plnohodnotných SPA aplikací, existuje také skutečná hodnota ve schopnosti vložit jej na běžnou HTML stránku.

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <h3>Cartoon characters</h3>
    <div v-for="(character, i) in characters" v-bind:key="i">
      <h4>{{ character.name }}</h4>
      <p><img v-bind:src="character.imgSrc" v-bind:alt="character.name"/></p>
    </div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    characters: [{
      name: 'Scooby',
      imgSrc: 'https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png'
    }, {
      name: 'Shaggy',
      imgSrc: 'https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png'
    } ]
  }
})

</script>

Zobrazí se kreslené postavičky Scooby a Shaggy. Příklad představuje v-bind: direktiva pro dynamickou vazbu dat z characters pole na src a alt atributy img prvek umožňující datům řídit obsah. Je to podobné tomu, jak se provádí textová interpolace pomocí {{}} , kromě v-bind interpoluje data do atributů. Funkční příklad tohoto můžete najít zde.

Namísto zobrazení obou postav změňme náš přístup a umožníme nám kliknout na odkaz pro každou postavu, abychom zobrazili konkrétní komponent „Scooby“ nebo „Shaggy“. Abych toho dosáhl, stáhnu knihovnu vue-router a provedu následující změny:

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/scooby">Scooby</router-link>
    <router-link to="/shaggy">Shaggy</router-link>
  </p>
  <router-view></router-view>
</div>

<script>
const Scooby = {
  template: `
    <div>
      <h4>Scooby</h4>
      <p>
        <img src="https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png" alt="scooby"/>
      </p>
    </div>`
}

const Shaggy = {
  template: `
    <div class="character">
        <h4>Shaggy</h4>
      <p><img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png" alt="shaggy"/></p>
    </div>`
}

const router = new vue-router({
  routes: [
    { path: '/scooby', component: Scooby },
    { path: '/shaggy', component: Shaggy }
  ]
})

const app = new Vue({ router: router }).$mount('#app')
</script>

Jak pravděpodobně víte, tato implementace je poháněna pevně zakódovanými komponentami, což z hlediska opětovné použitelnosti není prospěšná změna. Ukazuje však snadno sledovatelné použití vue-routeru. Kromě zdrojů knihovny vue-router obsahuje HTML dva nové prvky, vlastně komponenty specifické pro vue-router.

První komponenta vue-router je <router-link> což je komponenta, která přijímá cestu přes to atribut, který se ve skutečnosti nazývá "parametr" v komponentě Vue. <router-link> komponenta vytváří prvek hypertextového odkazu, který reaguje na události kliknutí a říká Vue, aby zobrazil komponentu spojenou s jeho to parametr, buď "/scooby" nebo "/shaggy".

Pod <router-link> je další nová součást, <router-view> , což je místo, kde vue-router říká Vue, aby vložil komponenty uživatelského rozhraní, Scooby a Shaggy. Komponenty vlastních šablon Scooby a Shaggy jsou definovány v script prvek ve spodní části této ukázkové stránky index.html.

Dále se vytvoří instance objektu vue-router s routes objekt, který definuje pole tras podobné tomu, které jsme viděli v aplikaci Survey v prvním článku. Zde jsou cesty trasy namapovány na komponenty Scooby a Shaggy. Poslední věcí, kterou musíte udělat, je vytvořit instanci instance Vue, dát jí objekt routeru jako vlastnost k jejímu objektu options a svázat instanci s aplikací div .

Můžete kliknout na odkaz směrovače Scooby nebo Shaggy a zobrazit je, jak je znázorněno níže. Kód pro tento příklad lze nalézt zde.

Použití vue-router k zobrazení individuálního průzkumu

Zpět v aplikaci Survey začněme naši diskusi tím, že se podíváme na soubor routes/index.js.

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

Domovská stránka zobrazuje průzkumy aplikace, když je vyžadována kořenová adresa URL na localhost:8080, protože je mapována na Home komponent přes trasy routeru.

Potřebuji se také připojit k Vue přes Vue.use(Router) funkce pro modulární SPA aplikaci, jako je tato. Kromě toho musím zahrnout router do objektu options, který je přiváděn do instance Vue v main.js podobně jako v příkladu hraček Scooby/Shaggy.

Pokračuji s aplikací Survey a přidávám novou trasu do routes objekt, který bude mapovat každý průzkum a jeho otázky na opakovaně použitelnou komponentu založenou na souboru Survey.vue. Do souboru routes/index.js importujte Survey a poté přidejte trasu k mapování každého průzkumu podle jeho ID do Survey komponenta.

// ... omitted for brevity
import Survey from '@/components/Survey'

// ... omitted for brevity

export default new Router({
  routes: [
    {
      // ... omitted for brevity
    }, {
      path: '/surveys/:id',
      name: 'Survey',
      component: Survey
    }
  ]
})

Všimněte si :id část nové cesty /surveys/:id . Toto je známé jako dynamický segment, který si můžete představit jako proměnnou v trase trasy. V tomto případě říkám, že :id se použije k identifikaci konkrétního průzkumu, který se zobrazí v Survey komponenta, která bude postavena jako další.

V adresáři "src/components/" vytvořte soubor s názvem Survey.vue, poté jej otevřete a přidejte standardní šablonu, skript a části stylu spolu s kódem uvedeným níže:

<template>
<div>
  <h3>I'm a Survey Component</h3>
</div>
</template>

<script>
export default {
  data() {
    return {
      survey: {}
    }
  },
  beforeMount() {
    console.log('Survey.beforeMount -> :id === ', this.$route.params.id)
  }
}
</script>

<style>

</style>

Uložím všechny soubory a spustím dev server s npm run dev a poté do prohlížeče zadejte následující adresu URL:localhost:8080/#/surveys/23. V konzole dev nástrojů mého prohlížeče vidím níže uvedený obrázek.

Tak co se právě stalo?

V template sekce Přidal jsem nějaký nesmyslný kód, aby bylo jasné, že komponenta Survey je obsluhována routerem. V script sekce I inicializoval jsem objekt průzkumu, který bude nakonec obsahovat data průzkumu. V beforeMount Lifecycle hook se děje něco pěkného. V této funkci přistupuji k trase aktuálního okna a následnému :id parametr definovaný v route modul.

Tato poslední část je možná díky Survey objekt Vue komponenty má odkaz na instanci vue-router poskytující přístup k trase, která mi umožňuje přistupovat k ní pomocí this.$route.params.id . Trasa může mít více dynamických segmentů a všechny jsou přístupné ve svých odpovídajících komponentách přes params člen this.$route objekt.

Dále budu definovat falešnou funkci AJAX v api/index.js, kterou volám z Survey beforeMount komponenty háček pro načtení průzkumu podle :id . Do api/index.js přidejte následující funkci:

const surveys = [{
  id: 1,
  name: 'Dogs',
  // ... omitted for brevity 
}, {
  id: 2,
  name: 'Cars',
  // ... omitted for brevity 
}]

// ... omitted for brevity

export function fetchSurvey (surveyId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const survey = surveys.find(survey => survey.id === surveyId)
      if (survey) {
        resolve(survey)
      } else {
        reject(Error('Survey does not exist'))
      }
    }, 300)
  })
}

Nyní zpět do Survey komponentu, kterou potřebuji importovat fetchSurvey a použijte jej v beforeMount k načtení požadovaného průzkumu. Opět pro vizuální účely vypíšu název průzkumu do šablony jako záhlaví bulma hero.

<template>
<div>
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h2 class="title">{{ survey.name }}</h2>
        </div>
      </div>
    </section>
</div>
</template>

<script>
import { fetchSurvey } from '@/api'
export default {
  data() {
    return {
      survey: {}
    }
  },
  beforeMount() {
    fetchSurvey(parseInt(this.$route.params.id))
      .then((response) => {
        this.survey = response
      })
  }
}
</script>

<style>
</style>

Aktualizuji adresu URL prohlížeče na localhost:8080/surveys/2, vidím to, co je zobrazeno níže:

Docela cool, že?

Dále bych chtěl se svým Survey udělat něco trochu užitečnějšího a zahrnout otázky a možnosti.

<template>
  <div>
    <!-- omitted survey name header for brevity -->

    <section class="section">
      <div class="container">

        <div class="columns">
          <div class="column is-10 is-offset-1">

            <div v-for="question in survey.questions" v-bind:key="question.id">

                  <div class="column is-offset-3 is-6">
                    <h4 class='title has-text-centered'>{{ question.text }}</h4>
                  </div>
                  <div class="column is-offset-4 is-4">
                    <div class="control">
                      <div v-for="choice in question.choices" v-bind:key="choice.id">
                        <label class="radio">
                        <input type="radio" v-model="question.choice" :value="choice.id">
                        {{ choice.text }}
                      </label>
                      </div>
                    </div>
                  </div>

            </div>

          </div>
        </div>

      </div>
    </section>
  </div>
</template>

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Opět platí, že uložení a obnovení prohlížeče pomocí adresy URL localhost:8080/#/surveys/2 nyní poskytuje seznam otázek a dostupné možnosti pro průzkum automobilů.

Dovolte mi, abych se pokusil rozbalit některé nové funkce Vue, které se používají. Už jsme obeznámeni s používáním v-for direktiva pro řízení generování otázek a voleb průzkumu, takže doufejme, že budete schopni sledovat, jak se tyto otázky zobrazují. Pokud se však zaměříte na to, jak se generují přepínače pro volbu otázky, všimnete si, že dělám dvě nové nebo mírně odlišné věci.

<div v-for="choice in question.choices" v-bind:key="choice.id">
  <label class="radio">
    <input type="radio" v-model="question.choice" :value="choice.id">
    {{ choice.text }}
  </label>
</div>

Pro rádiový vstup jsem použil v-model a dodal jí hodnotu question.choice . Tím se vytvoří nový člen na question objekt s názvem choice a registruje jej s rádiovým vstupem, což umožňuje tok dat ze skutečného rádiového vstupu do question.choice vlastnost objektu. Také používám zkrácenou syntaxi :value místo v-bind:value svázat hodnotu tohoto rádiového vstupu s hodnotou možností otázek, které jsou iterovány přes v-for .

Aside 2 – Použití směrnice v-model

Uvědomuji si, že v-model koncept je pravděpodobně trochu nejasný, takže mě nechejte stranou a uvedu další jednoduchý příklad pro demonstraci pointy. Zvažte triviální příklad níže. Opět můžete vidět funkční příklad tohoto kódu zde.

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <label for="name">What is your name</label>
    <input id="name" type="text" v-model="textInput" />
    <span>Hello {{ textInput }}</span>
  </div>

  <h4>Which do you like better?</h4>
  <div v-for="choice in radioChoices" :key="choice">
    <label>{{ choice }}</label>
    <input name="fruit" type="radio" v-model="favoriteFruit" :value="choice"/>
  </div>
  <h4>So you like {{ favoriteFruit }}</h4>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    textInput: '',
    radioChoices: ['apples', 'oranges'],
    favoriteFruit: ''
  }
})
</script>

První vstup je textový vstup s dotazem na jméno uživatele. Tento textový vstup má v-model registrován s datovou vlastností textInput k němu připojené, což udržuje textový vstup synchronizovaný s textInput data vlastnosti Vue instance. Věnujte chvíli zadání svého jména do textového vstupu a sledujte, jak se aktualizuje v <span>Hello {{ textInput }}</span> výstup HTML.

Úžasné, že?

Druhým vstupem je rádiový vstup s názvem „ovoce“, který zobrazuje ovoce „jablka“ a „pomeranče“ a žádá uživatele, aby si vybral své oblíbené. Rádiový vstup je registrován na favoriteFruit datová vlastnost Vue instance prostřednictvím v-model , která přiřadí hodnotu přiřazenou každému rádiovému vstupu pomocí :value="choice" syntaxe vazby atributu pro zachování favoriteFruit synchronizované s vybraným rádiovým vstupem. Opět můžete sledovat hodnotu favoriteFruit aktualizujte v <h4>So you like {{ favoriteFruit }}</h4> výstup prvku.

Níže uvádím několik příkladů výstupu. Doporučuji vám pohrát si s tímto příkladem, dokud nedojde k pojmu v-model je jasné.

Dokončení průzkumu

Dobře, zpět do aplikace průzkumu. Vzpomeňte si na případ, kdy se v průzkumu zobrazuje mnohem více otázek pod výchozí výškou obrazovky. Obecně chceme, aby se lidé nemuseli posouvat dolů, aby viděli váš nejdůležitější obsah. Lepší volbou by bylo listovat otázkami, které by zobrazovaly jednu otázku a její odpovědi najednou.

Aktualizované Survey komponenta to splňuje níže.

<template>
  <div>
    <!-- omitted for brevity -->
    <section class="section">
      <div class="container">

        <div class="columns">
          <div class="column is-10 is-offset-1">

            <div
              v-for="(question, idx) in survey.questions" <!-- modified v-for -->
              v-bind:key="question.id"
              v-show="currentQuestion === idx"> <!-- new v-show directive -->

                  <div class="column is-offset-3 is-6">
                    <!-- <h4 class='title'>{{ idx }}) {{ question.text }}</h4> -->
                    <h4 class='title has-text-centered'>{{ question.text }}</h4>
                  </div>
                  <div class="column is-offset-4 is-4">
                    <div class="control">
                      <div v-for="choice in question.choices" v-bind:key="choice.id">
                        <label class="radio">
                        <input type="radio" v-model="question.choice" :value="choice.id">
                        {{ choice.text }}
                        </label>
                      </div>
                    </div>
                  </div>

            </div>

            <!-- new pagination buttons -->
            <div class="column is-offset-one-quarter is-half">
              <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                <a class="pagination-previous" @click.stop="goToPreviousQuestion"><i class="fa fa-chevron-left" aria-hidden="true"></i> &nbsp;&nbsp; Back</a>
                <a class="pagination-next" @click.stop="goToNextQuestion">Next &nbsp;&nbsp; <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
              </nav>
            </div>

            <!-- new submit button -->
            <div class="column has-text-centered">
              <a v-if="surveyComplete" class='button is-focused is-primary is-large'
                @click.stop="handleSubmit">
                Submit
              </a>
            </div>

          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
import { fetchSurvey, saveSurveyResponse } from '@/api' // new AJAX func
export default {
  data() {
    return {
      survey: {},
      currentQuestion: 0  // new data prop
    }
  },
  beforeMount() {
    // omitted for brevity
  },
  methods: { // new Vue obj member
    goToNextQuestion() {
      if (this.currentQuestion === this.survey.questions.length - 1) {
        this.currentQuestion = 0
      } else {
        this.currentQuestion++
      }
    },
    goToPreviousQuestion() {
      if (this.currentQuestion === 0) {
        this.currentQuestion = this.survey.questions.lenth - 1
      } else {
        this.currentQuestion--
      }
    },
    handleSubmit() {
      saveSurveyResponse(this.survey)
        .then(() => this.$router.push('/'))
    }
  },
  computed: {  // new Vue obj member
    surveyComplete() {
      if (this.survey.questions) {
        const numQuestions = this.survey.questions.length
        const numCompleted = this.survey.questions.filter(q => q.choice).length
        return numQuestions === numCompleted
      }
      return false
    }
  }
}
</script>

Tyto změny spolupracují na dokončení průzkumu. Protože uzly otázek jsou generovány z v-for="(question, idx) in survey.questions" Používám v-show="currentQuestion === idx" direktiva pro testování, zda je hodnota vlastnosti data currentQuestion , odpovídá hodnotě idx . Tím je otázka div viditelné pouze při currentQuestion se rovná idx této otázky hodnota. Od hodnoty currectQuestion je inicializován na nulu, ve výchozím nastavení se zobrazí nultá otázka.

Tlačítka stránkování pod otázkami a odpověďmi umožňují uživateli listovat otázkami. Prvek tlačítka "další" má @click="goToNextQuestion" v něm, což je obsluha události kliknutí Vue, která reaguje voláním goToNextQuestion funkce uvnitř nového methods Vlastnost objektu Vue. methods objektu komponenty Vue sekce je místo, kde lze definovat funkce, které provádějí řadu věcí, nejčastěji ke změně stavu komponenty. Zde goToNextQuestion přírůstky currentQuestion o jednu, posune zobrazenou otázku dopředu nebo ji obnoví na první otázku. Tlačítko Zpět a jemu přidružené goToPreviousQuestion metoda dělá pravý opak.

Poslední změnou je funkce pro odeslání odpovědi na průzkum. Tlačítko používá v-show znovu určit, zda se má tlačítko zobrazit na základě hodnoty vypočítané vlastnosti nazvané surveyCompleted . Vypočítané vlastnosti jsou další úžasnou vlastností Vue. Jsou to vlastnosti, které obvykle řídí způsob zobrazení komponent uživatelského rozhraní, které se hodí, když je logika trochu složitější než kontrola jedné hodnoty vlastnosti dat. Tímto způsobem je kód šablony čistý a schopný soustředit se na prezentaci, zatímco logika zůstává v kódu JavaScript.

Posluchač události kliknutí, @click="handleSubmit" , je registrován na kotevním tlačítku odeslání, které volá handleSubmit metoda. Tato metoda volá simulovanou funkci AJAX saveSurveyResponse , která vrátí příslib a předá kontrolu „pak řetězci“. "Then chain" má zpětné volání .then(() -> this.$router.push('/')) , který volá objekt routeru komponenty a programově směruje aplikaci zpět do kořenové cesty zobrazující Home komponenta.

Do souboru api/index.js přidejte saveSurveyResponse funkce v dolní části souboru. Tato funkce přijímá objekt odpovědi na průzkum a jednoduše konzole zaznamenává „ukládání odpovědi na průzkum...“, dokud v budoucnu nepřipojím front-end k REST API.

export function saveSurveyResponse (surveyResponse) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("saving survey response...")
      })
      resolve()
    }, 300)
  })
}

Uložení všech souborů a obnovení prohlížeče pomocí adresy URL localhost:8080:/#/surveys/2 Vidím, co je níže. Doporučuji kliknout v aplikaci a ujistit se, že můžete logicky sledovat tok ovládání přes Survey komponenta.

Aside 3 – Programatické směrování

Podobně jako dříve chci předvést několik právě probíraných věcí s obměnou jednoho z předchozích příkladů hraček. Níže jsem upravil příklad navigace, který zobrazuje Scoobyho nebo Shaggyho, aby již nepoužíval <router-link> komponenta.

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <a @click="toScooby">Scooby</a>
    <a @click="toShaggy">Shaggy</a>
  </p>
  <router-view></router-view>
</div>

<script>
const Scooby = {
    template: `
    <div>
      <h4>Scooby</h4>
      <p>
        <img src="https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png" alt="scooby"/>
      </p>
    </div>`
}

const Shaggy = {
    template: `
    <div class="character">
      <h4>Shaggy</h4>
      <p>
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png" alt="shaggy"/>
      </p>
    </div>`
}

const router = new vue-router({
  routes: [
    { path: '/characters/scooby', component: Scooby },
    { path: '/characters/shaggy', component: Shaggy }
  ]
})

const app = new Vue({
  router: router,
  methods: {
    toScooby() { this.$router.push('/characters/scooby') },
    toShaggy() { this.$router.push('/characters/shaggy') }
  }
}).$mount('#app')

</script>

Příklad se chová úplně stejně jako předtím, ale nyní se směrování provádí pomocí kombinací posluchačů události kliknutí, metod Vue a ručního volání this.$router.push('/path') . To je vlastně to, co <router-link> dělá v zákulisí pomocí to="/path" hodnota. Doporučuji vám pohrát si s tímto živým příkladem zde.

Přidání odkazů směrovače do domovské komponenty

Poslední věc, kterou je třeba udělat s Survey komponenta poskytuje možnost navigace k průzkumu z Home komponent. Jak bylo uvedeno dříve na příkladu Scooby a Shaggy, vue-router to neuvěřitelně usnadňuje s <router-link> .

Zpět v Home komponentu proveďte následující úpravu:

<div class="card" v-for="survey in surveys" v-bind:key="survey.id">
  <div class="card-content">
    <p class="title">{{ survey.name}}</p>
    <p class='subtitle'>{{survey.created_at.toDateString()}}</p>
  </div>
  <div class="card-foooter">
    <router-link :to="`surveys/${survey.id}`" class="card-footer-item">Take Survey</router-link>
  </div>
</div>

Přidal jsem <router-link> komponent uvnitř zápatí bulma karty a dynamicky konstruoval cestu ke každému průzkumu. To se liší od doslovných řetězcových cest, které jsem uvedl ve svém dřívějším příkladu. Pro dynamické vytváření cest pomocí řetězců šablon JavaScriptu a iterovaných ID průzkumu používám předponu to parametr s dvojtečkou (":"), což je zkratka pro v-bind směrnice.

Uložím všechny soubory a vytáhnu kořenovou URL cestu, localhost:8080, ve svém prohlížeči, abych se ujistil, že to funguje. Měli byste být schopni kliknout na odkaz „Provést průzkum“ každého průzkumu a zobrazit Survey uživatelské rozhraní komponenty.

Pro dokončení přidávám jednoduchý navigační panel se záložkou "Domů" pomocí <router-link> a to parametr ukazující na kořenovou cestu aplikace v rámci nového souboru komponenty s názvem Header.vue v adresáři komponenty.

<template>
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <router-link to="/" class="navbar-item">
        Home
      </router-link>
    </div>
  </div>
</nav>
</template>

<script>
</script>

<style>
</style>

Aby bylo zajištěno, že bude zahrnuta na každé stránce aplikace, umístím ji do komponenty App.vue. Nejprve importuji Header komponentu jako AppHeader v script sekci a poté jej zaregistrujte přidáním vlastnosti nazvané components na objekt Vue komponenty aplikace a nastavte jej na hodnotu shodnou s objektem obsahujícím AppHeader komponenta.

Poté přidám komponentu do umístění šablony <app-header> přímo nad <router-view> komponent. Při pojmenovávání komponent je běžné používat velikost písmen Pascal, která spojuje slova, která je popisují, dohromady, přičemž první písmeno každého slova je velké. Poté jej zahrnu do šablony pouze malými písmeny s pomlčkami mezi každým slovem, které začíná velkým písmenem.

Ukládám soubory a obnovuji prohlížeč, nyní vidím Header komponenta obsahující navigační lištu na každé stránce aplikace.

Zdroje

Chcete se dozvědět více o Vue.js a vytváření front-end webových aplikací? Zkuste se podívat na některé z následujících zdrojů, abyste se mohli hlouběji ponořit do tohoto rozhraní front-end:

  • Vue.js 2 – Kompletní průvodce
  • Vývojářský kurz Ultimate Vue JS 2

Závěr

Pokud to stále čtete, spotřebovali jste docela dost dobroty Vue. V tomto příspěvku jsme se určitě zabývali spoustou materiálu a pokud jste noví ve Vue nebo SPA s jednosouborovou komponentou, pravděpodobně to stojí za druhé přečtení a výlet do vynikajících dokumentů Vue pro hlubší ponor.

Jako vždy děkuji za přečtení a nestyďte se níže komentovat nebo kritizovat.