Utilisez vue-router pour implémenter la navigation dans les pages

Comment utiliser vue-router pour sauter des pages dans Vue

Avec le développement du développement front-end, les applications monopage deviennent de plus en plus populaires parmi les développeurs. Dans le framework Vue, nous pouvons utiliser vue-router pour passer d'une page à l'autre afin d'offrir aux utilisateurs une expérience de navigation plus fluide. Dans cet article, je présenterai en détail comment utiliser vue-router pour les sauts de page et donnerai des exemples de code spécifiques.

Tout d'abord, nous devons installer la bibliothèque de dépendances vue-router. Exécutez la commande suivante sur la ligne de commande pour installer :

npm install vue-router

Une fois l'installation terminée, introduisez vue-router dans le fichier d'entrée du projet (généralement main.js) et montez-le sur l'instance Vue. Le code est le suivant :

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  routes: [
    // 配置路径和组件的映射关系
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Dans le code ci-dessus, nous avons d'abord introduit Vue et VueRouter via l'instruction import, puis avons installé le plug-in VueRouter via la méthode Vue.use(). Ensuite, nous avons créé une instance de routage et configuré les attributs mode et routes. L'attribut mode peut être défini sur history ou hash, qui correspondent respectivement au mode historique de HTML5 et au mode de hachage de l'URL. L'attribut routes est utilisé pour configurer la relation de mappage entre les chemins et les composants. Nous effectuerons des configurations spécifiques plus tard.

Avant de configurer la relation de mappage de routage, nous devons créer les composants correspondant à chaque page. Dans le framework Vue, chaque page correspond généralement à un composant. Dans le fichier Vue, la manière de définir un composant est la suivante :

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: 'ComponentName',
  // 组件的其他配置项
}
</script>

<style scoped>
/* 组件的样式 */
</style>

Dans le code ci-dessus, nous définissons d'abord la structure HTML du composant via la balise template, exportons un composant par défaut dans la balise script et définissons le composant attribut de nom. Enfin, nous pouvons définir le style du composant via la balise style En utilisant l'attribut scoped, le style ne prendra effet que sur le composant actuel.

Après avoir le composant, nous pouvons passer d'une page à l'autre en configurant la relation de mappage de routage. Dans l'attribut routes de l'instance de routage, nous pouvons configurer la relation de mappage entre les chemins et les composants via chaque objet. Le code est le suivant :

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 其他路由配置
  ]
});

Dans le code ci-dessus, nous définissons le chemin via l'attribut path, définissons le nom de l'itinéraire via l'attribut name et définissons le composant correspondant via l'attribut composant. Parmi eux, « / » représente le chemin racine et « about » représente le chemin /about. De cette façon, lors de l'accès au chemin correspondant, le composant correspondant sera chargé.

Après avoir configuré la relation de mappage de routage, nous pouvons utiliser le composant router-link fourni par vue-router dans le composant pour implémenter des sauts de page. Transmettez simplement le chemin à accéder au composant router-link en tant qu'attribut to. Le code est le suivant :

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

En plus d'utiliser le composant router-link, nous pouvons également utiliser les méthodes fournies par l'objet router dans le code JavaScript pour implémenter des sauts de page. Parmi elles, les méthodes les plus couramment utilisées sont push() et replace(). La première ajoutera un nouvel enregistrement à l'enregistrement de l'historique et la seconde remplacera l'enregistrement de l'historique actuel. Le code est le suivant :

// 在组件的某个方法中使用push()方法跳转页面
this.$router.push('/about');

// 在组件的某个方法中使用replace()方法跳转页面
this.$router.replace('/about');

Jusqu'à présent, nous avons présenté les étapes détaillées sur la façon d'utiliser vue-router pour accéder à la page et donné des exemples de code spécifiques. En configurant correctement la relation de mappage de routage et en utilisant les méthodes fournies par vue-router, nous pouvons facilement passer d'une page à l'autre et offrir aux utilisateurs une bonne expérience de navigation. J'espère que cet article vous sera utile, merci d'avoir lu !

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!