Explication détaillée de l'installation et de l'utilisation du routage en vue

Vue est un framework de développement front-end populaire qui fournit de nombreux outils et fonctions facilitant le développement. Parmi eux, le routage Vue peut nous aider à créer des applications d'une seule page et à implémenter des fonctions de routage. Cet article présentera l'utilisation du routage Vue.

Installation du routage Vue

Avant de commencer à utiliser le routage Vue, nous devons d'abord installer Vue Router. Il peut être installé via npm :

npm install vue-router

Utilisation du routeur Vue

Dans le fichier d'entrée main.js du projet Vue, nous devons effectuer quelques configurations pour utiliser le routage Vue.

Tout d'abord, nous devons importer Vue et Vue Router :

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

Vue.use(VueRouter)

Ensuite, nous devons définir des routes. Cela peut être fait dans un fichier js séparé. Par exemple, nous définissons ici la route dans routes.js :

import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default [
  {
    path: '/',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

Dans routes.js, nous importons d'abord les composants que nous devons utiliser, puis définissons une route contenant deux objets route. . tableau. Chaque objet route contient un chemin et des champs de composants.

Ensuite, dans main.js, nous devons créer une instance VueRouter et la transmettre à l'instance Vue :

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes // 简写
})

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

Ensuite, nous utilisons le routage dans notre composant Vue. Par exemple, nous pouvons utiliser des routes dans <router-link> pour créer des liens vers d'autres routes : <router-link>中使用路由链接到其他路由：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
</template>

在这里，我们使用 <router-link>

this.$router.push('/bar')

Ici, nous avons créé en utilisant la balise <router-link> Un lien d'itinéraire qui permet aux utilisateurs d'accéder à l'itinéraire spécifié en cliquant sur le lien. L'attribut to définit la route cible du lien.

De plus, on peut également utiliser la fonction de navigation programmatique fournie par Vue Router pour accéder à la page :

this.$router.push({ name: 'User', params: { userId: 1 }})

Lors du saut, on peut également passer certains paramètres :

rrreee

Ici, on utilise $ La méthode router.push passe un objet en tant que paramètre, où le champ name spécifie le nom de la route cible et le champ params transmet certains paramètres.

Résumé

Vue Router est l'un des composants très importants du framework Vue. Il fournit de puissantes fonctions de routage et peut nous aider à créer des applications d'une seule page plus colorées. Dans cet article, nous expliquons l'installation et l'utilisation du routage Vue et vous fournissons une compréhension plus approfondie de la façon d'utiliser Vue Router grâce à un exemple de code. J'espère que cela pourra aider tout le monde à mieux utiliser le routeur 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!