So gehen Sie mit einem Routing-Fehler von vue.js um
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">培养信息</el-menu-item>
<el-menu-item index="3" class="nav3">考核相关</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="个人资料">
<!-- 路由链接添加处 -->
<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>
<!-- 路由内容显示 -->
<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') //路由 启动应用
var Ctor = Vue.extend(Main)
new Ctor().$mount('#top-menu')
//主要就是下面这条语句多余 这是写组件时启动应用所用的语句
//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
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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)
Heiße Themen
So implementieren Sie API-Routing im Slim-Framework
Aug 02, 2023 pm 05:13 PM
So implementieren Sie API-Routing im Slim-Framework Slim ist ein leichtes PHP-Mikroframework, das eine einfache und flexible Möglichkeit zum Erstellen von Webanwendungen bietet. Eines der Hauptmerkmale ist die Implementierung des API-Routings, das es uns ermöglicht, verschiedene Anfragen den entsprechenden Handlern zuzuordnen. In diesem Artikel wird die Implementierung des API-Routings im Slim-Framework vorgestellt und einige Codebeispiele bereitgestellt. Zuerst müssen wir das Slim-Framework installieren. Die neueste Version von Slim kann über Composer installiert werden. Öffnen Sie ein Terminal und
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
Verwenden Sie JavaScript-Funktionen, um die Navigation und Weiterleitung von Webseiten zu implementieren
Nov 04, 2023 am 09:46 AM
In modernen Webanwendungen ist die Implementierung der Webseitennavigation und -weiterleitung ein sehr wichtiger Teil. Die Verwendung von JavaScript-Funktionen zur Implementierung dieser Funktion kann unsere Webanwendungen flexibler, skalierbarer und benutzerfreundlicher machen. In diesem Artikel wird die Verwendung von JavaScript-Funktionen zum Implementieren der Webseitennavigation und -weiterleitung vorgestellt und spezifische Codebeispiele bereitgestellt. Implementieren der Webseitennavigation Bei einer Webanwendung ist die Webseitennavigation der von Benutzern am häufigsten verwendete Teil. Wenn ein Benutzer auf die Seite klickt
So verwenden Sie Routing in ThinkPHP6
Jun 20, 2023 pm 07:54 PM
ThinkPHP6 ist ein leistungsstarkes PHP-Framework mit praktischen Routing-Funktionen, mit dem sich die URL-Routing-Konfiguration problemlos implementieren lässt. Gleichzeitig unterstützt ThinkPHP6 auch mehrere Routing-Modi wie GET, POST, PUT, DELETE usw. In diesem Artikel wird erläutert, wie Sie ThinkPHP6 für die Routing-Konfiguration verwenden. 1. GET-Methode im ThinkPHP6-Routing-Modus: Die GET-Methode ist eine Methode zum Abrufen von Daten und wird häufig für die Seitenanzeige verwendet. In ThinkPHP6 können Sie Folgendes verwenden
Implementierungsmethode und Erfahrungszusammenfassung zur flexiblen Konfiguration von Routing-Regeln in PHP
Oct 15, 2023 pm 03:43 PM
Implementierungsmethode und Erfahrungszusammenfassung der flexiblen Konfiguration von Routing-Regeln in PHP Einführung: In der Webentwicklung sind Routing-Regeln ein sehr wichtiger Teil, der die entsprechende Beziehung zwischen URL und bestimmten PHP-Skripten bestimmt. Bei der herkömmlichen Entwicklungsmethode konfigurieren wir normalerweise verschiedene URL-Regeln in der Routing-Datei und ordnen die URL dann dem entsprechenden Skriptpfad zu. Da jedoch die Komplexität des Projekts zunimmt und sich die Geschäftsanforderungen ändern, wird es sehr umständlich und unflexibel, wenn jede URL manuell konfiguriert werden muss. Also, wie man es in PHP implementiert
Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen?
Jul 21, 2023 pm 02:37 PM
Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen? Einführung: Im Vue-Projekt ist Routing eine der Funktionen, die wir häufig verwenden. Der Wechsel zwischen Seiten kann durch Routing erfolgen und sorgt so für eine gute Benutzererfahrung. Um den Seitenwechsel lebendiger zu gestalten, können wir dies durch Anpassen von Animationseffekten erreichen. In diesem Artikel wird erläutert, wie Sie mithilfe des Routings den Seitenwechsel-Animationseffekt im Vue-Projekt anpassen. Erstellen Sie ein Vue-Projekt. Zuerst müssen wir ein Vue-Projekt erstellen. Mit VueCLI können Sie schnell erstellen
Wie verwende ich Routing, um einen Seitensprung in Vue zu implementieren?
Jul 21, 2023 am 08:33 AM
Wie verwende ich Routing, um einen Seitensprung in Vue zu implementieren? Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklungstechnologie hat sich Vue.js zu einem der beliebtesten Front-End-Frameworks entwickelt. In der Vue-Entwicklung ist der Seitensprung ein wesentlicher Bestandteil. Vue stellt VueRouter zur Verwaltung des Anwendungsroutings bereit, und durch Routing kann ein nahtloser Wechsel zwischen Seiten erreicht werden. In diesem Artikel wird anhand von Codebeispielen erläutert, wie Sie mithilfe von Routing Seitensprünge in Vue implementieren. Installieren Sie zunächst das Vue-Router-Plugin im Vue-Projekt.
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
