Hoe maak je een pagina op Vue?

Een Vue-pagina wordt meestal gemaakt als een aparte component (.vue-bestand), dat bestaat uit drie secties: <template>, <script> en <style>.

<template>: Bepaalt de HTML-structuur van de pagina, met behulp van Vue-template-syntaxis om gegevens en logica te binden.
```
<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <p>{{ pageContent }}</p>
  </div>
</template>
```

<script>: Bevat de JavaScript-logica van de pagina, inclusief de definitie van data (data), berekende eigenschappen (computed), methoden (methods), lifecycle hooks en andere opties van het component.

<script>
export default {
  data() {
    return {
      pageTitle: 'Mijn Vue-pagina',
      pageContent: 'Dit is de inhoud van mijn eerste Vue-pagina.'
    };
  },
  mounted() {
    // Logica die wordt uitgevoerd na het monteren van het component
    console.log('Pagina gemonteerd!');
  }
}
</script>

<style>: Bevat CSS-stijlen die op het component worden toegepast. De scoped-modifier kan worden gebruikt om de stijl alleen op dit component toe te passen.
```
<style scoped>
h1 {
  color: blue;
}

p {
  font-size: 16px;
}
</style>
```

Het gemaakte component wordt vervolgens geïmporteerd in het routeringsbestand (bijvoorbeeld met vue-router) en gekoppeld aan een specifieke URL, zodat deze pagina wordt weergegeven bij navigatie naar dat adres.

// router/index.js (voorbeeld met vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Importeer het pagina component

const routes = [
  {
    path: '/mijn-pagina', // URL van de pagina
    name: 'MyPage',
    component: MyPage // Het te tonen component
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

In het hoofdapplicatiebestand (main.js) wordt de router gekoppeld aan de Vue-instantie.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Kortom, het maken van een Vue-pagina komt neer op het maken van een component dat de structuur, logica en stijlen beschrijft, en het configureren van de router om dat component weer te geven op een specifieke URL.