Plusieurs façons de se lancer dans le routage Vue

Dans Vue.js, le routage est un concept très important. Cela nous permet d'afficher différents contenus en fonction de différentes adresses URL. Dans Vue.js, nous pouvons accéder à différents composants ou pages via des adresses de routage. Dans cet article, nous présenterons plusieurs façons d'acheminer les sauts dans Vue.js.

1. Utilisez le composant router-link pour implémenter le saut de routage

router-link est le composant de saut de routage intégré de Vue.js. Il fournit une balise pour accéder à différents liens, et transmet l'adresse URL au composant router-view pour afficher la page correspondante. Nous pouvons utiliser le composant router-link dans le modèle pour passer d'une page à l'autre.

Ce qui suit est un exemple de code qui utilise le composant router-link pour accéder à d'autres pages :

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

Dans le code ci-dessus, nous utilisons deux composants router-link. L'attribut to est utilisé pour spécifier l'adresse de routage du saut. Par exemple, to="/about" signifie accéder à la page À propos de nous. Lorsque nous cliquons sur la balise , Vue.js fera correspondre l'adresse de routage et affichera le composant correspondant en fonction de la valeur de l'attribut to.

2. Utilisez la navigation programmatique dans Vue.js pour implémenter les sauts d'itinéraire

En plus d'utiliser le composant router-link pour les sauts d'itinéraire, Vue.js fournit également une méthode de navigation programmatique pour les sauts d'itinéraire. La navigation programmatique implémente des sauts de routage via le code JavaScript, ce qui nous permet d'accéder directement aux pages spécifiées dans le code.

Ce qui suit est un exemple de code pour implémenter le saut d'itinéraire à l'aide de la navigation programmatique dans Vue.js :

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons deux boutons pour implémenter le saut d'itinéraire. Lorsque nous cliquons sur le bouton, appelons la méthode goHome ou goAbout pour implémenter le saut de routage. Dans Vue.js, nous pouvons accéder à l'objet de routage via this.$router et appeler la méthode push() pour implémenter le saut de route. Lorsque nous appelons la méthode push() et transmettons l'adresse de routage cible, Vue.js fera automatiquement correspondre l'adresse de routage et affichera le composant correspondant.

3. Utilisez la méthode router.push() pour implémenter le saut de route

En plus d'utiliser la méthode $this.$router.push() pour implémenter le saut de route, Vue.js fournit également une méthode router.push() moyen d'effectuer des sauts de routage. Par rapport à la méthode $this.$router.push(), la méthode router.push() est plus directe et nous permet de contrôler plus finement le comportement du saut de routage.

Ce qui suit est un exemple de code qui utilise la méthode router.push() pour implémenter le saut d'itinéraire :

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la méthode router.push() pour implémenter le saut. Nous pouvons passer une chaîne ou un objet pour spécifier l'adresse de routage de destination. Dans l'exemple ci-dessus, nous avons passé un objet spécifiant l'adresse de routage et le nom de notre page.