Comment implémenter le routeur Jump in Vue

Vue est actuellement l'un des frameworks front-end les plus populaires. Il fournit de nombreux outils pour aider les développeurs à développer des applications Web plus rapidement et plus facilement. Le plus couramment utilisé est Vue Router. Vue Router est le gestionnaire de routage officiel de Vue.js, qui peut facilement implémenter la commutation de composants dans les applications SPA (applications à page unique). Cet article présentera donc en détail comment Vue Router implémente le saut.

1. Concepts de base de Vue Router

Vue Router est le gestionnaire de routage officiel basé sur Vue.js. Il sépare les différents composants de page via le routage, et les composants séparés peuvent être gérés et utilisés de manière plus flexible. Parmi eux, Vue Router a les concepts importants suivants :

1. Routing

Routing représente le chemin de la page L'accès à différents itinéraires peut afficher différentes pages ou composants. Les routes peuvent contenir des paramètres dynamiques, et nous pouvons utiliser ces paramètres pour contrôler le comportement de la page, les effets d'affichage des composants, etc.

2. Router

Router est une instance dans Vue.js, utilisée pour gérer le routage de la page entière. Nous pouvons utiliser des routeurs pour changer d'itinéraire, surveiller les changements d'itinéraire et d'autres opérations.

3. Composant de routage

Le composant de routage correspond aux différents composants que nous souhaitons afficher dans le routage, tels que la page de connexion, la page d'accueil, la page utilisateur, etc.

4. Vue d'itinéraire

La vue d'itinéraire est un composant , sa fonction est d'afficher dynamiquement les composants correspondants lorsque l'itinéraire change.

2. Trois façons de sauter dans Vue Router

Dans Vue Router, nous pouvons sauter des trois manières suivantes :

1. Navigation déclarative

Utilisez la balise router-link pour sauter, vous pouvez convertir l'événement de clic de l'utilisateur. en conversion de routage dans le programme. L'utilisation de la navigation déclarative évite certains problèmes liés à la manipulation directe des URL et à l'utilisation de la balise .

Exemple de code :

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

2. Navigation programmatique

Appelez l'objet $router dans la méthode événementielle et utilisez la méthode push ou replace pour accéder à la page spécifiée. La navigation programmatique peut être utilisée pour contrôler facilement le comportement des sauts d'itinéraire, et l'objet $route peut être utilisé pour accéder aux paramètres d'itinéraire et les gérer de manière flexible lors des sauts.

Exemple de code :

<template>
  <div>
    <button @click="toHome">to Home</button>
    <button @click="toAbout">to About</button>
  </div>
</template>

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

3. Redirect

Redirect signifie que l'itinéraire passe à une autre page avant de passer à la page spécifiée. Nous pouvons utiliser la méthode de redirection pour implémenter la redirection, qui peut omettre certaines étapes intermédiaires inutiles et accéder directement à la page dont nous avons besoin.

Exemple de code :

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

3. Passage des paramètres de Vue Router

Dans le développement d'applications Web, nous devons souvent transmettre des paramètres entre les routes et afficher différentes pages en fonction de différents paramètres. Dans Vue Router, nous pouvons transmettre des paramètres entre les routes de deux manières : le routage dynamique et les paramètres de requête.

1. Routage dynamique

Le routage dynamique fait référence à l'ajout de paramètres spécifiques à l'itinéraire, puis à l'utilisation de ces paramètres pour contrôler le comportement de la page. La méthode de transmission des paramètres du routage dynamique est relativement flexible et les valeurs des paramètres peuvent être mises à jour à tout moment lorsque l'itinéraire change.

Exemple de code :

// 配置路由
const router = new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'goods',
      component: () => import('@/views/Goods'),
    }
  ]
})

// 带参跳转
this.$router.push({
  name: 'goods',
  params: {
    id: 1
  }
})

// 获取参数值
this.$route.params.id

2. Paramètres de requête

Les paramètres de requête font référence à l'ajout de ?key=value à l'URL pour transmettre des paramètres spécifiques. La méthode de transmission des paramètres de requête est relativement simple et les valeurs des paramètres peuvent être obtenues et mises à jour via l'objet $route.

Exemple de code :

// 获取参数值
this.$route.query.key

// 更新参数值
this.$router.push({
  path: '/test',
  query: {
    key: 'value'
  }
})

Résumé

Cet article présente principalement les concepts de base de Vue Router, trois façons de router les sauts et deux façons de passer des paramètres. Dans les applications pratiques, nous pouvons utiliser différentes méthodes pour contrôler et gérer le routage en fonction de différents besoins. J'espère que l'introduction de cet article pourra vous aider à mieux comprendre comment utiliser 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!