Comment utiliser le routage pour réaliser un saut de page et un accès dans Vue

Comment utiliser le routage pour réaliser des sauts de page et des accès dans Vue

Dans le framework Vue, le routage est un concept très important, qui peut réaliser des sauts entre différentes pages dans une application et un accès à une seule page (Single Page Application). Vue fournit vue-router pour nous aider à gérer le routage.

1. Installez et configurez vue-router
Tout d'abord, nous devons utiliser npm pour installer vue-router, ouvrir l'outil de ligne de commande et exécuter la commande suivante :
npm install vue-router

Ensuite, dans l'ensemble. js du projet, vous devez introduire vue-router et l'activer. Le code est le suivant :
importer Vue depuis 'vue'
importer VueRouter depuis 'vue-router'

Vue.use(VueRouter);

const router = new VueRouter({
mode : 'history',
routes : [

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: About
}

]
})

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

Dans le code ci-dessus, nous d'abord introduit Vue et VueRouter. Ensuite, utilisez le plug-in vue-router via Vue.use (VueRouter). Ensuite, nous avons défini l'instance de routeur, dans laquelle le mode est défini sur historique, qui est un mode de routage courant qui utilise l'API d'historique HTML5 pour gérer les modifications de routage. routes est un tableau utilisé pour définir le chemin, le nom et le composant correspondant de la route.

2. Implémenter le saut de page et l'accès
Dans le code ci-dessus, nous avons défini deux chemins de routage, à savoir '/' et '/about'. Ces deux chemins correspondent respectivement à deux composants, où le composant Home correspond au chemin '/' et le composant About correspond au chemin '/about'.

Dans le composant Vue, nous pouvons utiliser le composant router-link pour implémenter des sauts de routage. Le code est le suivant :
Accueil
À propos

In le code ci-dessus Le composant router-link sera rendu dans une balise a, affichant le texte Accueil et À propos et déclenchant un saut de routage lorsque vous cliquez dessus.

De plus, nous pouvons utiliser le composant router-view pour afficher les composants correspondant à l'itinéraire actuel. Le code est le suivant :

Le code ci-dessus restituera dynamiquement les composants correspondants en fonction du chemin de l'itinéraire actuel.

En plus d'utiliser les composants router-link et router-view, nous pouvons également implémenter des sauts de page via la navigation d'itinéraire programmatique. Le code est le suivant :
// Dans le composant Vue
this.$router.push('/') // Aller au chemin '/'

Alternativement, nous pouvons également utiliser des routes nommées pour accéder à la page. Le code est le suivant :
// Dans le composant Vue
this.$router.push({ name: 'Home' }) // Aller à la route portant le nom 'Home'

Résumé
Dans Vue, via vue- Le plug-in du routeur nous permet d'accéder facilement aux pages et d'y accéder. En configurant des objets de routage, en définissant la relation de mappage entre les chemins de routage et les composants, et en utilisant des composants de liaison de routeur et des composants de vue de routeur, la navigation de routage et le rendu dynamique des composants peuvent être implémentés dans la page. De plus, grâce à la navigation par itinéraire programmatique, les sauts de page peuvent être implémentés en fonction de conditions spécifiques dans le composant Vue. Ce qui précède est une brève introduction et un exemple de code d'utilisation du routage dans Vue pour réaliser des sauts de page et des accès. J'espère que cela aide!

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!