Comment utiliser le routage pour implémenter les sauts de page et le changement dans Vue

Il est très simple d'utiliser le routage pour sauter et changer de page dans Vue. Vue Router est le gestionnaire de routage officiel de Vue.js, qui peut nous aider à implémenter le changement de page et la navigation dans les applications Vue. Cet article utilisera des exemples de code spécifiques pour présenter comment utiliser Vue Router pour réaliser des sauts de page et des changements de page.

Tout d’abord, nous devons installer Vue Router. Vue Router peut être installé via npm ou fil. Une fois

npm install vue-router

ou

yarn add vue-router

installé, introduisez Vue Router là où vous devez l'utiliser.

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

Vue.use(VueRouter)

Ensuite, nous devons créer une instance VueRouter et configurer le routage. Nous pouvons créer une configuration de routage dans un fichier séparé, puis importer et utiliser cette configuration de routage dans le fichier principal.

// router.js

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.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  mode: 'history' // 可选，使用history模式可以去掉URL中的#
})

export default router

Dans le code ci-dessus, nous avons défini trois routes : '/' correspond au composant Home, '/about' correspond au composant About et '/contact' correspond au composant Contact. De plus, nous pouvons également définir le mode de routage via l'option mode. La valeur par défaut est le mode de hachage. Utilisez le mode historique pour supprimer le # dans l'URL.

Ensuite, introduisez et utilisez cette configuration de routage dans le fichier principal.

// main.js

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

new Vue({
  router, // 将路由配置注入Vue实例
  render: h => h(App)
}).$mount('#app')

Dans le code ci-dessus, nous injectons la configuration de routage dans l'instance Vue afin que la fonctionnalité de routage puisse être utilisée dans toute l'application.

Ensuite, nous pouvons utiliser la balise dans le composant pour accéder à la page.

<!-- Home.vue -->

<template>
  <div>
    <h1 id="Home">Home</h1>
    <router-link to="/about">Go to About</router-link>
    <router-link to="/contact">Go to Contact</router-link>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la balise pour créer un lien, et l'attribut to spécifie le chemin vers lequel accéder.

Enfin, nous pouvons utiliser la balise dans le composant pour afficher le composant correspondant à l'itinéraire actuel.

<!-- App.vue -->

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Dans le code ci-dessus, la balise affichera dynamiquement les composants correspondants en fonction de l'itinéraire actuel.

À ce stade, nous avons terminé l'utilisation du routage dans Vue pour réaliser des sauts de page et des changements de page. Exécutez l'application et vous constaterez qu'après avoir cliqué sur la balise , la page passera automatiquement au composant correspondant et l'affichera dans la balise .

Ce qui précède est le processus de base d'utilisation de Vue Router pour réaliser des sauts de page et des changements de page. En introduisant Vue Router, en configurant le routage et en utilisant les balises et , nous pouvons implémenter rapidement et facilement des sauts de page et des changements de page. J'espère que cet article sera utile à votre apprentissage et à votre développement.

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!