Utilisez vue-router pour compléter des fonctions de navigation simples

Cet article présente principalement l'utilisation de vue-router pour effectuer des fonctions de navigation simples. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

vue-router est Vue. . Un ensemble de bibliothèques d'outils de routage dédiées officiellement fournies par js. Cet article présente principalement l'utilisation de vue-router pour compléter des fonctions de navigation simples. Les amis qui en ont besoin peuvent s'y référer

vue-router est une bibliothèque d'outils de routage dédiée officiellement fournie par Vue.js

La commande d'installation est la suivante

npm i vue-router -D

L'instance vue-router est un plug-in Vue, nous devons la connecter via Vue.use( ) dans la référence globale Vue dans l'instance Vue.

Dans notre projet, main.js est le fichier d'entrée du programme par défaut, et toutes les configurations globales seront effectuées dans ce fichier.

Nous ajoutons la référence suivante à main.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)

Cela termine le travail d'installation le plus basique de vue-router.

Les fonctions que nous souhaitons implémenter ensuite sont décrites comme suit

Il y a deux liens sur la page d'accueil : panier d'achat et centre personnel

Cliquez sur différents liens pour afficher un contenu différent

Nous créons d'abord deux fichiers de composants dans le répertoire src : Cart.vue Me.vue

Le contenu des deux fichiers de composants nouvellement créés a la même structure pour le pour le moment.

<template>
 <!-- 这个p里面的内容可设置不同以区分 -->
 <p>购物车</p>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>

L'étape suivante consiste à définir les règles de correspondance entre les routes et ces composants dans le fichier main.js.

La définition de VueRouter est très simple : créez une instance de VueRouter et spécifiez le chemin de routage vers un type de composant

Comme indiqué dans le code suivant (main.js)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
new Vue({
 el: '#app',
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

Nous pouvons extraire le code lié au routage ci-dessus et le mettre dans un autre fichier routes.js pour éviter que le contenu du fichier main.js ne s'allonge.

Créez un nouveau dossier de configuration et ajoutez-y le fichier routes.js.

Ensuite, le code routes.js est le suivant :

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
export default router;

Ensuite, le code du fichier main.js est réduit à ce qui suit :

import Vue from 'vue'
import App from './App.vue'
import router from './config/routes'
new Vue({
 el: '#app',
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

vue-router fournit deux balises d'instruction

 : restitue le composant de vue correspondant à le chemin
 : aide les utilisateurs à naviguer dans les applications avec des fonctions de routage

Avec les deux balises de commande ci-dessus, nous pouvons écrire le code correspondant dans l'entrée du programme App.vue Le voici :

<template>
 <p id="app">
 <p class="tabs">
  <ul>
  <li>
   <router-link to ="/cart">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link to ="/me">
   <p>个人中心</p>
   </router-link>
  </li>
  </ul>
 </p>
 <p class="content">
  <!-- 使用 router-view 渲染视图 -->
  <router-view></router-view>
 </p>
 </p>
</template>
<script>
export default {
 name: "app"
};
</script>
<style lang="scss"></style>

À ce stade, le code ci-dessus a atteint la fonction attendue.

Ensuite, nous voyons que le chemin vers ="/cart" a effectivement été défini dans {path:'/cart',component:Cart} S'il doit être modifié, il doit être modifié aux deux endroits en même temps (si c'est le cas). est utilisé ailleurs, cela change plus)

Alors ne serait-il pas génial de simplement retirer le chemin en {path:'/cart',component:Cart}.

À l'heure actuelle, notre vue-router fournit une méthode de référence de route implicite, appelée - nommée route

En termes simples, elle remplace Url< par le nom de référence de la route 🎜><🎜. >Le code de configuration de VueRouter est donc modifié comme suit :

const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {name:'cart',path:'/cart',component:Cart},
 {name:'me',path:'/me',component:Me}
 ]
})

De cette façon, nous utilisons v-bind pour lier l'attribut to de

<router-link > Ainsi, le code dans la partie lien d'App.vue est modifié comme suit

  <li>
   <router-link :to ="{name:&#39;cart&#39;}">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:&#39;me&#39;}">
   <p>个人中心</p>
   </router-link>
  </li>

À ce stade, la fonction de navigation simple est complétée à l'aide de vue-router

Les instructions

; balise avec le lien correct par défaut, et peut également être configuré. L'attribut tag génère d'autres balises

telles que

  <li>
   <router-link :to ="{name:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

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!