Que se passe-t-il avec le saut de page vue ?

Vue est un framework JavaScript moderne couramment utilisé pour créer des applications monopage (SPA). SPA permet aux utilisateurs de naviguer dans différentes pages et composants de page sans recharger la page entière. Dans Vue, les sauts de page sont principalement implémentés via le routage.

Le routage est un mécanisme qui mappe les URI aux composants. Un URI fait partie d'une URL, telle que "https://example.com/user/123". La partie /user/123 de l'URI est appelée chemin de routage. Dans Vue, le routage est implémenté via Vue Router.

Vue Router est le gestionnaire de routage officiel de Vue.js. À l'aide de Vue Router, vous pouvez définir des itinéraires et mapper des chemins de routage vers les composants Vue. Vue Router fournit également des fonctionnalités de navigation par itinéraire, permettant aux utilisateurs de naviguer vers différentes pages et composants de page sans recharger la page entière. La navigation par itinéraire peut être implémentée via des liens (tels que ) ou par programme (comme this.$router.push('/')).

L'utilisation de base de Vue Router est la suivante :

1. Installer Vue Router

npm install vue-router

2. Créer des routes

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

Dans le code ci-dessus, nous avons créé deux routes : "home" et "about", qui sont mappées aux composants Accueil et À propos. Les chemins de routage sont respectivement "/" et "/about".

3. Utilisation du routage dans les composants Vue

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

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

Dans le code ci-dessus, nous utilisons le composant <router-link> pour créer le lien de route et utilisons le <router- view&gt ; pour restituer les composants correspondant à l'itinéraire actuel. <router-link>组件来创建路由链接，并使用<router-view>组件来渲染当前路由匹配的组件。

4. 导航到不同的路由

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

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

在上面的代码中，我们通过编程方式导航到不同的路由。使用this.$router.push()

Naviguez vers différents itinéraires
rrreee🎜 Dans le code ci-dessus, nous naviguons vers différents itinéraires par programme. Utilisez la méthode this.$router.push() pour remplacer le chemin de routage actuel par un nouveau chemin. 🎜🎜En bref, Vue Router fournit un mécanisme de routage flexible et facile à utiliser. En définissant des itinéraires et en mappant les chemins d'itinéraire vers les composants Vue, nous pouvons créer des applications à page unique et permettre aux utilisateurs de naviguer vers différentes pages et composants de page sans recharger la page entière. 🎜

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!