Comment utiliser la navigation programmatique dans Vue Router ?

Vue Router est un plug-in de gestion de routage officiellement fourni par Vue.js. Il nous permet de gérer le rendu et la navigation de différents composants via des chemins d'URL. Parmi eux, la navigation programmatique est une fonction importante fournie par Vue Router, qui contrôle les sauts de routage et les opérations de navigation via le code.

Dans Vue Router, la navigation programmatique peut être réalisée via les méthodes de l'objet $route. Nous pouvons accéder à la page en appelant ces méthodes, notamment router.push, router.replace et router.go. Jetons un coup d'œil à l'utilisation spécifique. router.push、router.replace和 router.go。下面我们来看一下具体的使用方式。

首先，我们需要在vue-router库的基础上创建一个Vue Router实例，并将其注入到Vue实例中。在创建Vue Router实例时，我们需要配置路由映射，指定不同路径对应的组件。例如：

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

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

// 使用Vue Router插件
Vue.use(VueRouter)

// 创建Vue Router实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

// 注入Vue实例
new Vue({
  router,
  el: '#app',
  // ...
})

有了Vue Router实例之后，我们就可以使用编程式导航进行页面跳转了。下面我们分别介绍一下router.push、router.replace和router.go这三个方法的用法。

1. router.push

router.push方法可以用来跳转到指定的路径，并将该路径添加到浏览器的访问历史记录中。以下示例演示了在点击按钮后通过router.push方法跳转到About页面的过程：

// template
<template>
  <div>
    <button @click="goAbout">Go to About</button>
  </div>
</template>

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

2. router.replace

router.replace方法用于跳转到指定路径，但是不会向浏览器访问历史记录中添加新的记录。以下示例演示了在按钮点击后通过router.replace方法跳转到About页面的过程：

// template
<template>
  <div>
    <button @click="replaceAbout">Replace with About</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    replaceAbout() {
      this.$router.replace('/about')
    }
  }
}
</script>

3. router.go

router.go方法可以在浏览器的访问历史记录中向前或向后导航，通过传入负数可以表示向后导航，在点击按钮后通过router.go(-1)实现返回上一页的效果。

// template
<template>
  <div>
    <button @click="goBack">Go Back</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

通过这三种编程式导航的方法，我们可以实现不同场景下的页面跳转和导航操作。在具体使用时，我们只需要根据需求选择合适的方法，并将目标路径作为参数传递给对应的方法即可。

总结一下，Vue Router的编程式导航为我们提供了一种通过代码来控制路由跳转和导航的方式。通过router.push、router.replace和router.go

Tout d'abord, nous devons créer une instance Vue Router basée sur la bibliothèque vue-router et l'injecter dans l'instance Vue. Lors de la création d'une instance de Vue Router, nous devons configurer le mappage de routage et spécifier les composants correspondant aux différents chemins. Par exemple : 🎜rrreee🎜Après avoir une instance de Vue Router, nous pouvons utiliser la navigation par programmation pour accéder aux pages. Ci-dessous, nous présentons l'utilisation des trois méthodes router.push, router.replace et router.go respectivement. La méthode 🎜

1. router.push

🎜router.push peut être utilisée pour accéder au chemin spécifié et copier le chemin spécifié. le chemin est ajouté à l’historique d’accès du navigateur. L'exemple suivant montre le processus permettant d'accéder à la page À propos via la méthode router.push après avoir cliqué sur le bouton : 🎜rrreee

2. router.replace

🎜La méthode router.replace est utilisée pour accéder au chemin spécifié, mais elle n'ajoutera pas de nouveaux enregistrements à l'historique d'accès du navigateur. L'exemple suivant montre le processus permettant d'accéder à la page À propos via la méthode router.replace après avoir cliqué sur le bouton : 🎜rrreee

3. router.go

🎜router.go peut naviguer vers l'avant ou vers l'arrière dans l'historique d'accès du navigateur. En passant un nombre négatif, vous pouvez indiquer une navigation vers l'arrière. bouton Utilisez ensuite router.go(-1) pour obtenir l'effet de retour à la page précédente. 🎜rrreee🎜Grâce à ces trois méthodes de navigation programmatique, nous pouvons réaliser des sauts de page et des opérations de navigation dans différents scénarios. En utilisation spécifique, il suffit de choisir la méthode appropriée en fonction des besoins et de passer le chemin cible en paramètre à la méthode correspondante. 🎜🎜Pour résumer, la navigation programmatique de Vue Router nous offre un moyen de contrôler les sauts de routage et la navigation dans le code. Grâce aux trois méthodes router.push, router.replace et router.go, nous pouvons implémenter des fonctions telles que les sauts de page et la navigation historique. . Dans le développement réel, nous pouvons choisir la méthode appropriée en fonction de besoins spécifiques et la combiner avec l'interaction des composants pour obtenir une expérience de navigation riche. 🎜

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!