Routing des pages
Dans une application Vue, il est courant d'avoir plusieurs pages (Accueil, Profil, Panier, etc.). Plutôt que de tout afficher dans un seul fichier, Vue Router permet de naviguer entre plusieurs vues sans recharger la page.
Si nous créons une application sans Vue Router, nous devons gérer l'affichage des différentes sections manuellement en affichant/masquant des composants avec v-if.
Cela devient rapidement difficile à gérer et ralentit les performances.
Installation du router
npm install vue-router
Puis, ajoute Vue Router à ton application Vue dans main.js :
// router.ts
import HomeViewPage from './pages/HomeView.page.vue'
import CounterPage from './pages/Counter.page.vue'
import {createRouter, createWebHistory} from 'vue-router'
const routes = [
{path: '/', component: HomeViewPage},
{path: '/counter', component: CounterPage},
]
export const router = createRouter({
history: createWebHistory(),
routes,
})
On va aussi ajouter le nécessaire dans le main.ts :
import NaiveUI from 'naive-ui';
import {createApp} from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia';
import {router} from './router';
const app = createApp(App);
app.use(NaiveUI);
app.use(createPinia());
app.use(router);
app.mount('#app');
Nous allons désormais créer des Pages dans un dossier dédié. Il s'agira en réalité de composants Vue mais qui seront les seuls résultats affichés par le router.
Création des Pages
HomeView.page.vue
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import UserCollection from '../components/UserCollection.component.vue';
import type {User} from '../types/common.type.ts';
import {NButton, NCard, NText} from 'naive-ui';
import {useRandomUserStore} from "@/stores/randomUser.store.ts";
import {storeToRefs} from "pinia";
const randomUserStore = useRandomUserStore();
const {randomUseGenerated} = storeToRefs(randomUserStore);
const selectedUser = ref<User | null>(null);
const users = ref<User[]>([]);
const userReceived = (user: User) => {
selectedUser.value = user;
};
const addUser = async () => {
await randomUserStore.generateUser()
if (randomUseGenerated.value) {
users.value.push(randomUseGenerated.value)
}
};
onMounted(async () => {
await addUser()
});
</script>
<template>
<div
>
<n-card v-if="selectedUser" bordered title="Utilisateur sélectionné">
<n-text strong>{{ selectedUser.name }}</n-text>
</n-card>
<UserCollection :users="users" @send-user="userReceived">
<div class="form-group">
<n-button type="primary" @click="addUser">Ajout user Random</n-button>
</div>
</UserCollection>
</div>
</template>
Counter.page.vue
<template>
<CounterComponent/>
</template>
<script lang="ts" setup>
import CounterComponent from "@/components/Counter.component.vue";
</script>
NavMenu.component.vue
Nous allons aussi créer un composant permettant de faciliter notre navigation entre les pages.
```vue
<template>
<n-layout-header bordered>
<n-menu v-model:value="activeKey" :options="menuOptions" mode="horizontal"/>
</n-layout-header>
</template>
<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {NMenu, NLayoutHeader} from 'naive-ui'
const router = useRouter()
const activeKey = ref(router.currentRoute.value.path)
const menuOptions = [
{
label: 'Accueil',
key: '/',
onClick: () => router.push('/')
},
{
label: 'Compteur',
key: '/counter',
onClick: () => router.push('/counter')
}
]
</script>
<style scoped>
.n-layout-header {
padding: 10px;
}
</style>
Ajout du <RouterView /> dans App.vue
Il faut ajouter le composant <RouterView /> dans le composant racine App.vue pour afficher les pages. Ce composant va checker votre rotuer et afficher le sous composant défini dans le router en fonction de votre URL.
<template>
<div>
<NavMenuComponent/>
<RouterView/>
</div>
</template>
<script setup>
import NavMenuComponent from "@/components/NavMenu.component.vue";
</script>