Comment implémenter le saut de page Web dans Vue

Dans les applications Vue, il existe de nombreuses façons d'implémenter des sauts de page Web. Voici quelques méthodes couramment utilisées.

1. Utiliser vue-router

vue-router est le plug-in de routage frontal officiel pour Vue, qui peut nous aider à gérer le routage des applications plus facilement. Les sauts de page peuvent être obtenus en ajoutant des chemins et des composants correspondants dans la configuration de routage. De manière générale, nous devons introduire vue-router dans le fichier main.js et injecter le routeur dans l'instance Vue. Par exemple, nous pouvons ajouter le code suivant au fichier App.vue :

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

    <router-view/>
  </div>
</template>

<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
</script>

Dans le code ci-dessus, nous utilisons deux composants router-link pour créer des liens cliquables sur la page. Ces deux liens correspondent respectivement aux composants Home et About. Nous les lions aux chemins correspondants via le tableau routes dans la configuration de routage.

2. Utilisation de l'objet window

Dans Vue, nous pouvons également utiliser directement l'objet natif JavaScript window.location pour implémenter des sauts de page. Par exemple, si nous voulons accéder à une page nommée "aboutUs.html", nous pouvons utiliser le code suivant dans le composant :

methods: {
  goToAboutUsPage() {
    window.location.href = 'aboutUs.html'
  }
}

De cette façon, après avoir cliqué sur le bouton, la page passera à la page spécifiée.

3. Utilisez router.push

En plus d'utiliser vue-router dans la configuration de routage pour accéder à la page, nous pouvons également utiliser la méthode this.$router.push() dans le composant pour réaliser le saut. Par exemple, en supposant que nous voulons accéder au chemin nommé « à propos », nous pouvons utiliser le code suivant dans le composant :

methods: {
  goToAboutPage() {
    this.$router.push('/about')
  }
}

De cette façon, après avoir cliqué sur le bouton, la page passera au chemin spécifié.

Résumé

Il existe de nombreuses façons d'implémenter les sauts de page dans les applications Vue, et le choix spécifique doit être basé sur la situation réelle. Si vous avez besoin d'implémenter des sauts de routage plus complexes, vous pouvez utiliser vue-router pour la gestion ; si vous n'avez besoin que de simples sauts de page, vous pouvez utiliser l'objet window.location ou la méthode this.$router.push() pour y parvenir.

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!