Comment configurer l'en-tête lorsque la vue saute

Vue est un framework JavaScript populaire pour créer des applications monopage (SPA). Dans Vue, la navigation dans les applications et les sauts de page sont contrôlés via le routage. Lorsque les utilisateurs accèdent à des pages via le routage Vue, comment configurer l'en-tête ? Cet article présentera en détail comment configurer l'en-tête lorsque les routes Vue sautent.

Qu'est-ce que Vue Router ?

Vue Router est la bibliothèque officielle de gestion de routage de Vue. Il peut faire correspondre les itinéraires en fonction des URL, puis afficher les composants correspondants. Vue Router peut nous aider à basculer entre les pages et à transmettre des paramètres. Il peut également implémenter certaines fonctions avancées, telles que les gardes de route, le chargement paresseux des routes, etc.

Étapes pour utiliser Vue Router

Étape 1 : Créer un projet Vue

Si vous utilisez déjà Vue.js pour créer le projet, vous pouvez ignorer cette étape. Si vous êtes nouveau, veuillez d'abord installer Vue.js. Pour les méthodes d'installation spécifiques, veuillez vous référer au site officiel https://cn.vuejs.org/.

Étape 2 : Installer Vue Router

Nous pouvons installer Vue Router via le gestionnaire de packages npm, entrez la commande suivante :

$ npm install vue-router -save

Étape 3 : Créer une instance de Vue Router

Utiliser Vue Router dans Vue.js est très simple, Nous devons simplement créer une instance de Vue Router, qui sera chargée de gérer toutes nos routes. Introduisez Vue Router dans le fichier main.js et créez une instance de Vue Router comme suit :

import Vue from 'vue'; // 导入Vue
import VueRouter from 'vue-router'; // 导入Vue Router
import App from './App.vue'; // 导入根组件
import routes from './routes'; // 导入路由配置

Vue.use(VueRouter); // 安装Vue Router

const router = new VueRouter({
  routes // 配置路由规则
});

new Vue({
  el: '#app',
  router, // 注入路由实例
  render: h => h(App) // 渲染根组件
});

Dans le code ci-dessus, nous importons d'abord Vue, Vue Router, les composants d'application et les fichiers de configuration de routage.

Ensuite, nous installons Vue Router via Vue.use (VueRouter). Ensuite, nous créons une instance de Vue Router via new VueRouter() et transmettons la configuration de routage à l'instance.

Enfin, nous injectons l'instance de route dans l'option router du composant racine. De cette façon, nous pouvons utiliser l'instance Vue Router dans toute notre application.

Étape 4 : Définir les règles de routage

Définir les règles de routage dans Vue Router est très simple, il suffit de définir un tableau dans le fichier de configuration de routage. Chaque élément du tableau représente une règle de routage, comme indiqué ci-dessous :

import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  },
  {
    path: '*',
    name: 'not-found',
    component: NotFound
  }
];

export default routes;

. Dans le code ci-dessus, nous définissons quatre règles de routage : '/', '/about', '/contact', ''. Parmi eux, « / » signifie la page d'accueil et « » signifie la page 404.

Étape 5 : Utiliser les composants de routage

Dans Vue Router, chaque règle de routage peut correspondre à un composant. Lorsque nous définissons des règles de routage, nous avons précisé les composants correspondant à chaque règle de routage. Maintenant, nous devons utiliser le composant de routage dans le composant App.vue pour afficher différentes pages.

Dans App.vue, nous utilisons la balise pour afficher les composants correspondant aux règles de routage actuelles, comme indiqué ci-dessous :

<template>
  <div id="app">
    <header>
      <!-- 配置header -->
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Dans le code ci-dessus, nous utilisons la balise Avec les composants Vue, Vue affichera dynamiquement différents composants de routage via des règles de routage. Vous pouvez également ajouter ici du code HTML statique et des styles CSS pour créer l'en-tête.

Étape 6 : Configurer l'en-tête

Vue Router fournit un hook global beforeEach(), qui est exécuté avant le saut de route. Nous pouvons modifier dynamiquement le contenu de l’en-tête dans ce hook.

Ajoutez le code suivant au fichier main.js :

router.beforeEach((to, from, next) => {
  const title = to.meta.title;

  if (title) {
    document.title = title;
  }

  next();
});

Dans le code ci-dessus, nous déterminons si l'attribut méta est défini dans la règle de routage actuelle. S'il est défini, la valeur du titre dans l'attribut méta est attribuée à. l'en-tête.

Résumé

Cet article détaille comment configurer l'en-tête lorsque Vue Router saute. Nous pouvons utiliser la balise fournie par Vue Router pour afficher dynamiquement les composants de routage et, en même temps, modifier dynamiquement le contenu de l'en-tête dans le hook global beforeEach() pour obtenir une meilleure expérience utilisateur. J'espère que cet article pourra vous aider à configurer les en-têtes lors de l'utilisation de Vue Router.

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!