Comment utiliser Vue Router pour réaliser une interaction et une communication entre les pages ?

Comment utiliser Vue Router pour réaliser une interaction et une communication entre les pages ?

Vue Router est l'outil officiel de gestion de routage de Vue.js. Il peut nous aider à créer des applications SPA (Single Page Application) et à faciliter l'interaction et la communication entre les pages. Dans cet article, nous apprendrons comment utiliser Vue Router pour implémenter l'interaction et la communication entre les pages, et fournirons quelques exemples de code.

Qu'est-ce que Vue Router ?

Vue Router est un gestionnaire de routage officiel basé sur Vue.js, utilisé pour implémenter des fonctions de routage dans les applications SPA. Grâce à Vue Router, nous pouvons définir des règles de routage et effectuer des sauts de page et le chargement de composants conformément aux règles.

Installer et configurer Vue Router

Tout d'abord, nous devons installer Vue Router via npm :

npm install vue-router

Une fois l'installation terminée, nous devons introduire Vue Router dans le fichier d'entrée du projet Vue et effectuer la configuration de base. Comme indiqué ci-dessous :

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 其他路由规则
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dans le code ci-dessus, nous introduisons d'abord Vue et VueRouter, et activons le plug-in Vue Router via Vue.use(VueRouter). Ensuite, nous définissons un tableau routes, qui contient nos règles de routage. Vue.use(VueRouter)来启用Vue Router插件。然后，我们定义了一个routes数组，其中包含了我们的路由规则。

在创建Vue实例时，我们将router对象传入，并在组件中使用<router-view></router-view>标签来显示对应的组件。

路由跳转

Vue Router提供了两种方式来实现路由跳转：声明式导航和编程式导航。

声明式导航

在模板中，我们可以使用<router-link>标签来声明式地导航到其他页面。例如：

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

编程式导航

如果在Vue实例的方法中需要进行路由跳转，我们可以使用$router对象来实现编程式导航。例如：

// 在某个方法中进行路由跳转
this.$router.push('/')
this.$router.push('/about')

路由参数

有时，我们需要根据某些参数来动态地生成路由。Vue Router可以通过路由参数来实现这个功能。

定义带参数的路由

在路由规则中，我们可以通过使用冒号来定义带参数的路由。例如，我们可以定义一个带有动态id的路由：

const routes = [
  { path: '/user/:id', component: User }
]

获取路由参数

在组件中，我们可以通过this.$route.params来获取路由参数。例如：

// 在User组件中获取路由参数
mounted() {
  console.log(this.$route.params.id)
}

嵌套路由

Vue Router还支持嵌套路由的功能，允许我们在一个组件中加载其他子组件。通过嵌套路由，我们可以构建多层级的组件结构。

定义嵌套路由

在路由规则中，我们可以使用children属性来定义嵌套子路由。例如：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
]

在组件中加载子组件

在父组件的模板中，我们可以使用<router-view>标签来加载子组件。父组件将会作为子组件的容器。

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

路由间的通信

在实际开发中，我们经常需要在不同的页面间进行数据的共享和通信。Vue Router提供了一些机制来实现路由间的通信。

路由参数

如前所述，我们可以通过路由参数来传递数据在不同的页面间传递数据。在前面的例子中，我们使用了用户id作为路由参数。

路由钩子

Vue Router中的路由钩子函数可以帮助我们在路由切换时进行一些操作，例如获取数据或跳转验证。

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在跳转前执行的操作
  next()
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 在跳转完成后执行的操作
})

除了全局路由钩子，我们还可以在组件中使用组件内的路由钩子。例如，在组件中定义一个beforeRouteEnter

Lors de la création d'une instance Vue, nous transmettons l'objet router et utilisons la balise <router-view></router-view> pour l'afficher dans le composant composants correspondants.

Route Jump

Vue Router propose deux façons d'implémenter le saut d'itinéraire : la navigation déclarative et la navigation programmatique. 🎜

Navigation déclarative

🎜Dans les modèles, nous pouvons utiliser la balise <router-link> pour naviguer de manière déclarative vers d'autres pages. Par exemple : 🎜

const User = {
  beforeRouteEnter(to, from, next) {
    // 在获取数据之前进行验证操作
    next()
  }
}

Navigation programmatique

🎜Si des sauts de routage sont requis dans les méthodes de l'instance Vue, nous pouvons utiliser l'objet $router pour implémenter la navigation programmatique. Par exemple : 🎜rrreee🎜Paramètres de routage🎜🎜Parfois, nous devons générer dynamiquement des itinéraires en fonction de certains paramètres. Vue Router peut implémenter cette fonction via des paramètres de routage. 🎜

Définir des itinéraires avec des paramètres

🎜Dans les règles de routage, nous pouvons définir des itinéraires avec des paramètres en utilisant des deux-points. Par exemple, nous pouvons définir une route avec un identifiant dynamique : 🎜rrreee

Obtenir les paramètres de la route

🎜Dans le composant, nous pouvons obtenir les paramètres de la route via this.$route.params . Par exemple : 🎜rrreee🎜Routage imbriqué🎜🎜Vue Router prend également en charge la fonction de routage imbriqué, nous permettant de charger d'autres sous-composants dans un composant. Grâce au routage imbriqué, nous pouvons construire une structure de composants à plusieurs niveaux. 🎜

Définir des routes imbriquées

🎜Dans les règles de routage, nous pouvons utiliser l'attribut children pour définir des sous-routes imbriquées. Par exemple : 🎜rrreee

Chargement des composants enfants dans les composants

🎜Dans le modèle du composant parent, nous pouvons utiliser la balise <router-view> pour charger les composants enfants. Le composant parent agira comme un conteneur pour le composant enfant. 🎜rrreee🎜Communication entre routes🎜🎜Dans le développement réel, nous avons souvent besoin de partager et de communiquer des données entre différentes pages. Vue Router fournit certains mécanismes pour implémenter la communication entre les routes. 🎜

Paramètres de routage

🎜Comme mentionné précédemment, nous pouvons transmettre des données entre différentes pages via des paramètres de routage. Dans l'exemple précédent, nous avons utilisé l'identifiant de l'utilisateur comme paramètre de routage. 🎜

Hook de routage

🎜La fonction de hook de routage dans Vue Router peut nous aider à effectuer certaines opérations lors du changement d'itinéraire, comme l'obtention de données ou la vérification de saut. 🎜rrreee🎜En plus des hooks de routage globaux, nous pouvons également utiliser des hooks de routage intra-composant dans les composants. Par exemple, définissez une fonction hook beforeRouteEnter dans le composant pour effectuer des opérations de vérification avant d'obtenir des données. 🎜rrreee🎜Résumé🎜🎜Grâce à l'introduction de cet article, nous avons appris à utiliser Vue Router pour réaliser une interaction et une communication entre les pages. Nous avons appris à installer et à configurer Vue Router et avons fourni des exemples de code pour démontrer les sauts d'itinéraire, les paramètres d'itinéraire, les itinéraires imbriqués et la communication entre les itinéraires. J'espère que cet article vous sera utile lorsque vous utilisez Vue Router ! 🎜

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!