Comment sauter entre deux itinéraires en vue (une brève analyse de la méthode)

Vue est un framework JavaScript très populaire qui nous permet d'améliorer l'efficacité du développement en créant des applications Web composées de composants. Le système de routage de Vue.js nous permet de naviguer entre différentes pages. Cet article explique comment sauter entre deux routes Vue.

Le routage de Vue est effectué via le plug-in vue-router. Le plugin vue-router fournit une instance de routeur qui nous permet de définir et de gérer les routes de notre application. Pour utiliser vue-router, nous devons l'introduire dans l'application Vue.

Définir des itinéraires

Tout d'abord, définissez des itinéraires dans votre application Vue. La façon de définir des itinéraires consiste à définir le mappage d'itinéraire de Vue Router. Il spécifie le mappage entre les chemins d'URL et les composants Vue. Le mappage de route peut être défini via l'attribut routes de l'instance vue-router.

Par exemple, créez un composant Vue nommé "Home" :

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

Ensuite, nous pouvons définir un itinéraire dans la carte de routage pour pointer le chemin de la page d'accueil vers le composant Home :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

Dans le code ci-dessus, nous utilisons d'abord l'import instruction pour importer la bibliothèque Vue et Vue Router et le composant Home. Ensuite, enregistrez le Vue Router dans l'application Vue via l'appel Vue.use(). Définissez ensuite une feuille de route routes, qui contient un élément de chemin pour définir le chemin URL et un élément de composant pour spécifier le composant Vue du chemin correspondant. Enfin, nous créons une instance de routeur et la transmettons à l'instance Vue.

Utiliser les sauts d'itinéraire

Maintenant que nous avons créé une carte d'itinéraire et défini un itinéraire, l'étape suivante consiste à savoir comment effectuer des sauts d'itinéraire. Vue Router propose deux types de sauts : la navigation déclarative et la navigation programmatique.

Navigation déclarative

La navigation déclarative fait référence à l'utilisation du composant dans le composant Vue pour accéder à un autre itinéraire. Par exemple, utilisez la balise dans le composant Accueil pour accéder au composant À propos :

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

Ici, nous utilisons l'attribut to pour spécifier le chemin de l'itinéraire cible du saut. Vue résout l'attribut to comme un chemin complet vers une autre route.

Navigation programmatique

La navigation programmatique utilise la méthode $router dans l'instance Vue Router pour passer d'une route à l'autre. Par exemple, dans le composant Home, nous pouvons utiliser la méthode $router.push pour accéder au composant About :

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="gotoAbout">About Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoAbout () {
      this.$router.push('/about')
    }
  }
}
</script>

Ici, nous définissons une méthode gotoAbout, dans laquelle la méthode $router.push est utilisée pour accéder à l'itinéraire vers l'itinéraire cible.

Résumé

Grâce aux deux méthodes ci-dessus, nous pouvons réaliser le saut entre deux itinéraires Vue. La navigation déclarative et la navigation programmatique sont toutes deux des méthodes de saut de routage couramment utilisées dans Vue Router. Dans le développement réel, nous pouvons choisir différentes méthodes en fonction de scénarios spécifiques.

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!