Comment passer une nouvelle page via le bouton en vue

Dans Vue, nous pouvons passer d'une page à l'autre grâce au routage. Dans cet article, nous explorerons comment passer à une nouvelle page à l'aide de boutons dans Vue. Nous utiliserons Vue Router, le plugin de routeur officiel de Vue.

Vue Router est le routeur officiel de Vue.js. Il nous permet de mettre en place des tables de routage qui mappent certaines URL aux composants Vue. De cette façon, nous pouvons naviguer vers différentes pages via une URL. Installons d'abord Vue Router.

Installer Vue Router

Pour utiliser Vue Router, nous devons d'abord l'installer. Il peut être installé à l’aide de npm ou de fil.

Utilisez npm:

npm install vue-router

Utilisez fil:

yarn add vue-router

Utilisation de Vue Router dans le projet Vue

Après avoir installé Vue Router, nous devons l'utiliser dans le projet Vue. Pour utiliser Vue Router dans un projet Vue, vous devez introduire Vue Router dans main.js et l'utiliser.

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ...
  ]
})

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

Dans le code ci-dessus, nous avons d'abord introduit Vue et Vue Router dans main.js. Ensuite, nous disons à Vue d'utiliser Vue Router via Vue.use (VueRouter). Ensuite, nous créons une instance VueRouter et lui transmettons des règles de routage. Enfin, nous transmettons cette instance VueRouter à l'option router de l'instance Vue. De cette façon, Vue Router peut fonctionner dans notre application.

Définir des routes

Dans Vue Router, nous pouvons utiliser l'attribut routes pour définir des routes. routes 属性来设置路由。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

以上代码中，我们在 routes 属性中设置了两个路径，'/'和'/about'。当我们访问这些路径时，Vue Router将渲染与路径对应的组件。

传递参数

在Vue Router中，我们可以通过URL参数来传递数据。我们可以在URL中添加参数，这些参数将被传递给我们定义的组件。

例如，我们要传递一个名为 id 的参数，我们可以像这样设置路由：

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

在这个路由中，我们使用 ':id' 设置了参数。这个参数将被传递给我们的组件 User。

在User组件中，我们可以通过 $route.params.id 来访问这个参数。例如：

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

以上代码中，我们使用 $route.params.id 访问了我们传递过来的参数。

前进和后退

Vue Router也支持前进和后退的功能。我们可以使用 $router.go() 方法来实现前进和后退。例如：

<template>
  <div>
    <button @click="$router.go(-1)">Back</button>
    <button @click="$router.go(1)">Foward</button>
  </div>
</template>

以上代码中，我们创建了两个按钮。一个用来后退，一个用来前进。当点击这些按钮时，我们调用 $router.go()rrreee

Dans le code ci-dessus, nous définissons deux chemins, '/' et '/about' dans l'attribut routes. Lorsque nous accédons à ces chemins, Vue Router restituera le composant correspondant au chemin.

Passer les paramètres

Dans Vue Router, nous pouvons transmettre des données via des paramètres d'URL. Nous pouvons ajouter des paramètres dans l'URL et ces paramètres seront transmis aux composants que nous définissons. 🎜🎜Par exemple, si nous voulons passer un paramètre appelé id, nous pouvons définir la route comme ceci : 🎜rrreee🎜Dans cette route, nous avons défini le paramètre en utilisant ':id'. Ce paramètre sera passé à notre composant Utilisateur. 🎜🎜Dans le composant Utilisateur, nous pouvons accéder à ce paramètre via $route.params.id. Par exemple : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons $route.params.id pour accéder aux paramètres que nous avons passés. 🎜🎜Avant et arrière🎜🎜Vue Router prend également en charge les fonctions avant et arrière. Nous pouvons utiliser la méthode $router.go() pour avancer et reculer. Par exemple : 🎜rrreee🎜Dans le code ci-dessus, nous avons créé deux boutons. Un pour reculer et un pour avancer. Lorsque ces boutons sont cliqués, nous appelons la méthode $router.go(), en passant un paramètre numérique. Ce nombre représente le nombre de pas que nous voulons avancer ou reculer. Les nombres négatifs signifient un retour en arrière, les nombres positifs signifient une progression. 🎜🎜Résumé🎜🎜Dans cet article, nous avons appris à utiliser Vue Router pour configurer des itinéraires, transmettre des paramètres et avancer et reculer. Grâce à ces méthodes, nous pouvons facilement passer d'une page à l'autre du projet Vue. 🎜

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!