Nouvelle page

Création d’une nouvelle page dans un projet standard.

Création de la page

Une page est une Vue qui contient des composants et qui sera affichée en allant accédant à une URL spécifique définie grâce à Vue Router.

Pour cela, vous pouvez créer un nouveau fichier UserDeclaration.vue dans le dossier views :

views/
├── tests/
├── About.vue
├── Home.vue
├── Maintenance.vue
├── NotFound.vue
└── +UserDeclaration.vue

Une page est un composant Vue.js, vous pouvez donc initialiser ce fichier avec la définition minimale d’un composant.

Vous pouvez maintenant importer les composants que vous souhaitez afficher dans cette page et les utiliser dans le template :

<template>
	<PageContainer>
		<VCard class="pa-8">
			<UserForm />
		</VCard>
	</PageContainer>
</template>

<script lang="ts">
	import Vue from 'vue';
	import Component from 'vue-class-component';

	import UserForm from '@/components/UserForm.vue';

	@Component({
		components: {
			UserForm
		}
	})
	export default class UserDeclaration extends Vue {}
</script>

Le composant PageContainer est utilisé pour afficher une page avec une largeur standard.

Métadonnées

Il est recommandé d’ajouter des métadonnées comme le titre et la description sur chaque page. Pour cela, vous pouvez utiliser Vue Meta.

Pour déclarer ces informations, vous pouvez créer une méthode metaInfo annotée avec le décorateur @Meta :

import Vue from 'vue';
import Component from 'vue-class-component';

import { Meta, MetaInfo } from '@/decorators';

import UserForm from '@/components/UserForm.vue';

@Component({
	components: {
		UserForm
	}
})
export default class UserDeclaration extends Vue {
	/* istanbul ignore next */
	@Meta
	metaInfo(): MetaInfo {
		return {
			title: this.$t('views.userDeclaration.meta.title') as string,
			meta: [
				{
					name: 'description',
					content: this.$t('views.userDeclaration.meta.description') as string
				}
			]
		};
	}
}

Le commentaire /* istanbul ignore next */ permet de ne pas inclure la méthode metaInfo dans la couverture de tests.

Le titre et la description sont stockés dans le fichier de traduction userDeclaration.
La méthode this.$t() de Vue i18n permet de récupérer ces valeurs.

Ajout de la page au routeur

Une fois la page créée, vous devez l’ajouter à la déclaration des routes du routeur dans le fichier routes.ts afin de pouvoir y accéder :

export const routes = [
	{
		path: '/',
		name: 'home',
		component: Home
	},
	{
		path: '/declaration',
		name: 'userDeclaration',
		// Route level code-splitting
		// This generates a separate chunk (user-declaration.[hash].js) for this route
		// which is lazy-loaded when the route is visited
		component: () => import(
			/* webpackChunkName: "user-declaration" */
			'@/views/UserDeclaration.vue'
		)
	},
	// …
];

La syntaxe component: () => import('@/views/UserDeclaration.vue') est un import dynamique de webpack. Cela permet de créer un chunk spécifique pour cette route et de ne charger celui-ci que lorsque la route est visitée.
La page d’accueil n’est pas importée de manière asynchrone afin de charger cette page le plus rapidement possible.

Accéder à la page

Vous pouvez maintenant accéder à la page /declaration dans votre navigateur.

Vous pouvez également créer un lien vers cette page :

<VBtn
	:to="{
		name: 'userDeclaration'
	}"
	large
	color="primary"
>
	Me déclarer
</VBtn>

Pour créer des liens, il est préférable d’utiliser le nom de la route plutôt que son chemin, cela permet de modifier le chemin sans casser les liens vers cette page.

Vous pouvez aussi rediriger l’utilisateur vers cette page en utilisant la navigation programmatique :

router.push({
	name: 'userDeclaration'
});