vue-router implementiert die Tab-Tab-Seite

Dieser Artikel stellt hauptsächlich die relevanten Methoden des Vue-Routers zur Implementierung der Registerkarte vor. Ich hoffe, dass er allen helfen kann.

vue-router ist das offizielle Routing-Plug-in für Vue.js, geeignet zum Erstellen von Tab-Anwendungen. Die Tab-Anwendung von Vue basiert auf Routing und Komponenten. Routing wird verwendet, um Zugriffspfade festzulegen und Pfade zu Komponenten zuzuordnen. Vue-Router rendert jede Komponente an der richtigen Stelle.

Zunächst ist der Inhalt in .vue sehr einfach: b988a8fd72e5e0e42afffd18f951b277 erstellt eine Beschriftung und gibt den Pfad an, 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>

Wir haben eine Kontoseite, Konto, die auch zwei Registerkarten enthält, nämlich Kurs und Bestellung.
Beim Schreiben von Routen müssen Sie auf die hierarchische Beziehung zwischen den Seiten achten. Zuerst habe ich es so geschrieben:

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 
 } 
 ] 
})

Dies tun führt dazu, dass beim Klicken auf < ;router-link> zu einer neuen Seite gesprungen wird, anstatt die Komponente in 975b587bf85a482ea10b0a28848e78a4 anzuzeigen.
Die richtige Route sollte wie folgt geschrieben werden:

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

Registrieren Sie ein Root-Routenkonto, registrieren Sie Kurs und Bestellung als Unterrouten im Konto und b988a8fd72e5e0e42afffd18f951b277 entspricht to="account/course".

Ich habe gerade erst angefangen, an Vue zu arbeiten, und dieses Problem beschäftigt mich schon seit langem, deshalb werde ich es hier aufzeichnen.

Für Tutorials zu vue.js-Komponenten klicken Sie bitte auf die speziellen Tutorials zum Lernen von vue.js-Komponenten und zum Lernen von Vue.js-Frontend-Komponenten.

Verwandte Empfehlungen:

Über jqueryUI Tab Tab Beispielcode

JavaScript-Code-Sharing: Tab-Label-Wechsel

Wie js und jquery jeweils die Tab-Seitenfunktion implementieren

Das obige ist der detaillierte Inhalt vonvue-router implementiert die Tab-Tab-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!