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, crée une étiquette et spécifie le chemin,

<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 clic, qui passera à une nouvelle page au lieu d'afficher le composant dans .
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 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!