Comment faire afficher une nouvelle page dans la mise en page vue

Avec la popularité du framework Vue, de plus en plus de développeurs Web commencent à l'utiliser pour développer des applications Web complètes. La documentation et la communauté de Vue évoluent également constamment pour répondre aux besoins changeants des utilisateurs de Vue. Cependant, pour ceux qui souhaitent implémenter une mise en page complète dans Vue, la question la plus courante est de savoir comment afficher la nouvelle page dans la mise en page. Si vous rencontrez également ce problème, ne vous inquiétez pas. Cet article présentera quelques méthodes pour le résoudre.

Vue.js utilise de nombreux concepts, notamment les composants, les modèles et le routage. Ces concepts rendent le développement de Vue très flexible et facile à maintenir. Pour la mise en page, Vue fournit la mise en page du concept. La mise en page est un composant utilisé pour définir la mise en page, y compris l'en-tête, la barre latérale, le bas et la zone de contenu principale. Dans Vue, une mise en page se trouve généralement dans le composant App.vue ou un composant racine similaire et contient d'autres composants enfants.

Dans les applications Web traditionnelles, lorsque nous cliquons sur un lien ou soumettons un formulaire, le serveur affichera une nouvelle page. Mais dans Vue, nous utilisons généralement le routeur Vue. Vue Router est un outil qui permet de définir tous les chemins possibles dans une application, et les composants qui correspondent à ces chemins. Cela signifie que nous pouvons exploiter Vue Router pour ouvrir n'importe quel composant de l'application Vue, plutôt que de simplement charger une nouvelle page HTML.

Voici quelques méthodes de routeur Vue pour ouvrir de nouveaux composants :

1. router.push()

La méthode routeur.push() nous permet de passer d'un composant à un autre, comme en cliquant sur un lien. Par exemple :

this.$router.push('/dashboard');

Cela mènera au composant nommé "Dashboard". La méthode

2. router.replace()

router.replace() nous permet de remplacer les enregistrements dans l'historique de l'itinéraire actuel sans ajouter de nouveaux éléments d'historique. Par exemple :

this.$router.replace('/dashboard');

Cela accédera au composant nommé "Dashboard" et remplacera l'élément actuel de l'historique de l'itinéraire. La méthode

3. router.go()

router.go() nous permet d'avancer ou de reculer d'un nombre spécifié d'étapes dans l'historique. Par exemple :

this.$router.go(-1);

Cela fera un pas en arrière dans l’histoire.

Utilisez ces méthodes dans le routeur Vue pour ouvrir de nouveaux composants dans la mise en page. Nous pouvons définir une vue d'itinéraire dans le composant de mise en page pour afficher le composant dans la vue de mise en page. En utilisant cette approche, nous garantissons que chaque nouvelle page est ouverte dans la mise en page.

Voici le code d'un exemple de fichier .vue qui contient le composant de mise en page, la vue principale et la vue d'itinéraire :

<template>
  <div id="app">
    <layout>
      <router-view />
    </layout>
  </div>
</template>

<script>
import Layout from './components/Layout.vue';

export default {
  components: {
    Layout
  },
};
</script>

Dans le code ci-dessus, nous avons d'abord importé notre composant de mise en page, puis l'avons défini dans le modèle. Nous utilisons également des vues d'itinéraire dans notre définition. Cette vue sera ouverte dans notre composant.

Afin de définir plus clairement le chemin dans le routeur, nous devons inclure le code suivant dans l'objet routeur :

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
});

Dans ce qui précède, nous avons défini deux chemins, l'un est / et l'autre est /dashboard. Lorsqu'un utilisateur accède à une URL, le routeur ouvre soit le composant Accueil, soit le composant Tableau de bord, en fonction de l'URL à laquelle l'utilisateur a accédé.

Dans une application Vue complète, d'autres composants peuvent être ajoutés à la mise en page comme ci-dessus.

Résumé

Dans Vue JS, le composant Layout est un moyen de répartir raisonnablement les éléments dans une page Web. En utilisant les méthodes du routeur Vue, nous pouvons ouvrir de nouveaux composants à l'intérieur du composant Layout au lieu de les charger dans des pages séparées. Cela peut considérablement accélérer le changement de page et permettre aux applications Web d'offrir une meilleure expérience utilisateur. Après avoir résolu les problèmes ci-dessus, je pense que cela vous aidera à développer rapidement des applications Vue de haute qualité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!