vue-router implémente la page à onglets

Cet article présente principalement les méthodes pertinentes de vue-router pour implémenter la page à onglet en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

vue-router est le plug-in de routage officiel pour Vue.js, adapté à la création d'applications à onglets. L'application à onglets de Vue est basée sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et mapper les chemins vers les composants. Vue-router restituera chaque composant au bon endroit.

Tout d'abord, le contenu de .vue est très simple, b988a8fd72e5e0e42afffd18f951b277 crée une étiquette et spécifie le chemin, 975b587bf85a482ea10b0a28848e78a4

<template> 
 <p id="account"> 
 <p class="tab"> 
  <!-- 使用 router-link 组件来导航. --> 
  <!-- 通过传入 `to` 属性指定链接. --> 
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 
  <router-link to="/account/course">我的课程</router-link> 
  <!-- 注意这里的路径，course和order是account的子路由 --> 
  <router-link to="/account/order">我的订单</router-link> 
 </p> 
 <!-- 路由出口 --> 
 <!-- 路由匹配到的组件将渲染在这里 --> 
 <router-view></router-view> 
 </p> 
</template>

La structure est très simple. Nous avons une page de compte, compte, qui contient également deux pages à onglet, à savoir cours et commande.
Lorsque vous rédigez des itinéraires, vous devez faire attention à la relation hiérarchique entre les pages. Au début, je l'ai écrit comme ceci :

import Vue from 'vue' 
import Router from 'vue-router' 
import Account from ... 
import CourseList from ... 
import OrderList from ... 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
 { 
 path: '/account', 
 name: 'account', 
 component: Account 
 }, 
 { 
 path: '/my-course', 
 name: 'course', 
 component: CourseList 
 }, 
 { 
 path: '/my-order', 
 name: 'order', 
 component: OrderList 
 } 
 ] 
})

Faire cela. entraînera le clicb988a8fd72e5e0e42afffd18f951b277, qui passera à une nouvelle page au lieu d'afficher le composant dans 975b587bf85a482ea10b0a28848e78a4.
L'itinéraire correct doit être écrit comme ceci :

routes: [ 
 { 
 path: '/account', 
 name: 'account', 
 component: Account, 
 children: [ 
 {name: 'course', path: 'course', component: CourseList}, 
 {name: 'order', path: 'order', component: OrderList} 
 ] 
 } 
]

Enregistrez un compte d'itinéraire racine, enregistrez le parcours et commandez en tant que sous-itinéraires dans le compte , et b988a8fd72e5e0e42afffd18f951b277 correspond à="compte/cours".

Je viens de commencer à travailler sur Vue, et ce problème me dérange depuis longtemps, je vais donc l'enregistrer ici.

Pour les didacticiels sur les composants vue.js, veuillez cliquer sur les didacticiels spéciaux d'apprentissage des composants vue.js et les didacticiels d'apprentissage des composants frontaux Vue.js pour apprendre.

Recommandations associées :

À propos de l'exemple de code d'onglet jqueryUI

Partage de code JavaScript : changement d'étiquette d'onglet

Comment js et jquery implémentent respectivement la fonction de page à onglet

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!