So gehen Sie mit einem Routing-Fehler von vue.js um
Jun 15, 2018 pm 03:55 PM
Dieses Mal zeige ich Ihnen, wie Sie mit einem Routing-Fehler von vue.js umgehen und welche Vorsichtsma?nahmen für den Umgang mit einem Routing-Fehler von vue.js gelten. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.
Ich habe das Routing in vue.js neu gelernt und der Vue-Demo, die ich zuvor geschrieben habe, ein einfaches Routing-Beispiel hinzugefügt (von vue-router 2), aber nach dem Hinzufügen des Klicks nur noch Die Die Adressleiste ?ndert sich, aber der Inhalt ?ndert sich nicht. Und schlie?lich wurde der Grund dafür gefunden, dass dieselbe ID zweimal gestartet wurde (das erste Mal, als die Vue-Komponente verwendet wurde, und das andere Mal). einer wurde w?hrend des Routings gestartet)
Anbei ist ein Teil des Codes
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<!-- 引入樣式 -->
?<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >
</head>
<style>
body?{
?margin:?0;
?padding:?0;
}
.logo?{
?width:?166.65px;
?height:?60px;
?position:?absolute;
}
.el-menu-demo?{
?margin-left:?166.65px;
}
.tac?{
?width:?500px;
}?
.bar2,.bar3{
?display:?none;
}
</style>
<body>
<p id="top-menu">
?<p class="logo">
?<img src="baidu.gif" alt="">
?</p>
?<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
?<el-menu-item index="1" class="nav1">基本資料</el-menu-item>
?<el-menu-item index="2" class="nav2">培養(yǎng)信息</el-menu-item>
?<el-menu-item index="3" class="nav3">考核相關(guān)</el-menu-item>
?<el-menu-item index="4" class="nav4">清算</el-menu-item>
?</el-menu>
</p>
<p id="left-menu">
<el-row class="tac">
?<!-- 基本資料-->
?<el-col :span="8" class="bar1">
?<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" @select="handleSelect" theme="dark">
?<el-menu-item-group title="個(gè)人資料">
?<!-- 路由鏈接添加處 -->
?<router-link to = "/information"><el-menu-item index="1"><i class="el-icon-message"></i>基本信息</el-menu-item></router-link>
?<el-menu-item index="2"><i class="el-icon-message"></i>修改密碼</el-menu-item>
?</el-menu-item-group>
?<el-menu-item-group title="會員資料">
?<router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>會員信息</el-menu-item></router-link>
?</el-menu-item-group>
?<el-menu-item-group title="小組資料">
?<el-menu-item index="4"><i class="el-icon-message"></i>小組信息</el-menu-item>
?</el-menu-item-group>
?</el-menu>
?</el-col>
?</el-row>
<!-- 路由內(nèi)容顯示 -->
<p class = "content">
?<router-view></router-view>
</p>
</p>
</body>
?<!-- 先引入 Vue -->
?<script src="https://unpkg.com/vue/dist/vue.js"></script>
?<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
?<!-- 引入組件庫 -->
?<script src="https://unpkg.com/element-ui/lib/index.js"></script>
?<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
?$(document).ready(function(){
?$(".nav1").click(function(){
?$(".bar1").show().siblings().hide();?
?})
?$(".nav2").click(function(){
?$(".bar2").show().siblings().hide();?
?})
?$(".nav3").click(function(){
?$(".bar3").show().siblings().hide();
?})
?})
?</script>
?<script type="text/javascript">
//vue組件部分
?var?Main?=?{
?data()?{
?return?{
??activeIndex:?'1'
?};
?},
?methods:?{
?handleSelect(key,?keyPath)?{
??/*console.log(key,?keyPath);*/
?}
?}
?}
//vue路由部分
?const?Information?=?{template:'<p>foo</p>'}
?const?List?=?{template:'<p>list</p>'}
?const?routes?=?[
?{path:'/information',component:Information},
?{path:'/list',component:List}]
?const?router?=?new?VueRouter({
?routes
?})
?const?app?=?new?Vue({
?router
?}).$mount('#left-menu')?//路由?啟動(dòng)應(yīng)用
?var?Ctor?=?Vue.extend(Main)
?new?Ctor().$mount('#top-menu')
?//主要就是下面這條語句多余?這是寫組件時(shí)啟動(dòng)應(yīng)用所用的語句
?//new?Ctor().$mount('#left-menu')
?</script>
</html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
react+native+video erzeugt Vollbildeffekt
Angular CLI+Angular 5 praktische Projektdemonstration
Das obige ist der detaillierte Inhalt vonSo gehen Sie mit einem Routing-Fehler von vue.js um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Vue.js vs. React: projektspezifische überlegungen
Apr 09, 2025 am 12:01 AM
Vue.js eignet sich für kleine und mittelgro?e Projekte und schnelle Iterationen, w?hrend React für gro?e und komplexe Anwendungen geeignet ist. 1) Vue.js ist einfach zu bedienen und für Situationen geeignet, in denen das Team nicht ausreicht oder die Projektskala klein ist. 2) React hat ein reichhaltigeres ?kosystem und eignet sich für Projekte mit hoher Leistung und komplexen funktionalen Bedürfnissen.
Java Apache Camel: Aufbau einer flexiblen und effizienten serviceorientierten Architektur
Feb 19, 2024 pm 04:12 PM
Apache Camel ist ein auf Enterprise Service Bus (ESB) basierendes Integrationsframework, das problemlos unterschiedliche Anwendungen, Dienste und Datenquellen integrieren kann, um komplexe Gesch?ftsprozesse zu automatisieren. ApacheCamel verwendet eine routenbasierte Konfiguration, um Integrationsprozesse einfach zu definieren und zu verwalten. Zu den Hauptmerkmalen von ApacheCamel geh?ren: Flexibilit?t: ApacheCamel kann problemlos in eine Vielzahl von Anwendungen, Diensten und Datenquellen integriert werden. Es unterstützt mehrere Protokolle, einschlie?lich HTTP, JMS, SOAP, FTP usw. Effizienz: ApacheCamel ist sehr effizient und kann eine gro?e Anzahl von Nachrichten verarbeiten. Es verwendet einen asynchronen Nachrichtenmechanismus, der die Leistung verbessert. Erweiterbar
Ist Vue.js schwer zu lernen?
Apr 04, 2025 am 12:02 AM
Vue.js ist nicht schwer zu lernen, insbesondere für Entwickler mit einer JavaScript -Stiftung. 1) Sein progressives Design und das reaktionsschnelle System vereinfachen den Entwicklungsprozess. 2) Komponentenbasierte Entwicklung macht das Codemanagement effizienter. 3) Die Nutzungsbeispiele zeigen eine grundlegende und fortgeschrittene Verwendung. 4) H?ufige Fehler k?nnen durch VEDEVTOOLS debuggen werden. 5) Leistungsoptimierung und Best Practices, z. B. die Verwendung von V-IF/V-Shows und Schlüsselattributen, k?nnen die Anwendungseffizienz verbessern.
Dynamische Methoden zum Hinzufügen und L?schen von Routen in Uniapp
Dec 17, 2023 pm 02:55 PM
Uniapp ist ein Cross-End-Framework, das auf Vue.js basiert. Es unterstützt das einmalige Schreiben und generiert gleichzeitig Multi-End-Anwendungen wie H5, Miniprogramme und APPs. Dabei wird gro?er Wert auf Leistung und Entwicklungseffizienz gelegt Entwicklungsprozess. In Uniapp ist das dynamische Hinzufügen und L?schen von Routen ein Problem, das h?ufig w?hrend des Entwicklungsprozesses auftritt. Daher wird in diesem Artikel das dynamische Hinzufügen und L?schen von Routen in Uniapp vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Fügen Sie Routen dynamisch hinzu, je nach tats?chlichem Bedarf, wenn die Seite geladen wird oder nachdem der Benutzer sie ausgeführt hat.
Wird Vue für Frontend oder Backend verwendet?
Apr 03, 2025 am 12:07 AM
Vue.js wird haupts?chlich für die Front-End-Entwicklung verwendet. 1) Es handelt sich um ein leichtes und flexibles JavaScript-Framework, das sich auf den Aufbau von Benutzeroberfl?chen und einseitigen Anwendungen konzentriert. 2) Der Kern von Vue.js ist das reaktionsschnelle Datensystem, und die Ansicht wird automatisch aktualisiert, wenn sich die Daten ?ndert. 3) Es unterstützt die Komponentenentwicklung und die Benutzeroberfl?che kann in unabh?ngige und wiederverwendbare Komponenten aufgeteilt werden.
Tipps zur Verwendung von Route Interceptors in Uniapp
Dec 17, 2023 pm 04:30 PM
Tipps zur Verwendung von Routen-Interceptoren in Uniapp In der Uniapp-Entwicklung sind Routen-Interceptoren eine sehr h?ufige Funktion. Mit Routeninterceptoren k?nnen wir vor Routensprüngen einige spezifische Vorg?nge ausführen, z. B. Berechtigungsüberprüfungen, Parameter für die Seitenübergabe usw. In diesem Artikel stellen wir Tipps zur Verwendung von Route Interceptors in Uniapp vor und stellen spezifische Codebeispiele bereit. Erstellen Sie einen Routen-Interceptor. Zuerst müssen wir im Uniapp-Projekt einen Routen-Interceptor erstellen. Die Erstellungsmethode ist wie folgt: Erstellen Sie ein Inter im Projektstammverzeichnis
VUE.JS: Definieren seiner Rolle in der Webentwicklung
Apr 18, 2025 am 12:07 AM
Vue.js 'Rolle in der Webentwicklung besteht darin, als progressives JavaScript -Framework zu fungieren, das den Entwicklungsprozess vereinfacht und die Effizienz verbessert. 1) Es erm?glicht Entwicklern, sich auf Gesch?ftslogik durch reaktionsschnelle Datenbindung und Komponentenentwicklung zu konzentrieren. 2) Das Arbeitsprinzip von Vue.js beruht auf reaktionsschnellen Systemen und virtuellem DOM, um die Leistung zu optimieren. 3) In den tats?chlichen Projekten ist es üblich, Vuex zu verwenden, um den globalen Zustand zu verwalten und die Datenreaktionsf?higkeit zu optimieren.
Vue.js und der Frontend Stack: Verst?ndnis der Verbindungen
Apr 24, 2025 am 12:19 AM
Vue.js ist eng in den Front-End-Technologie-Stack integriert, um die Entwicklungseffizienz und die Benutzererfahrung zu verbessern. 1) Konstruktionstools: Integrieren Sie sich in Webpack und Rollup, um eine modulare Entwicklung zu erzielen. 2) Staatsmanagement: Integrieren Sie sich in Vuex, um den komplexen Anwendungsstatus zu verwalten. 3) Routing: Integrieren Sie sich in Vuerouter, um einseitige Anwendungsrouting zu realisieren. 4) CSS -Pr?prozessor: Unterstützt SASS und weniger, um die Stilentwicklungseffizienz zu verbessern.
