Web-Frontend
js-Tutorial
Informationen zum Vue-Router, der die Übertragung von Sprungparametern zwischen Komponenten implementiert
Informationen zum Vue-Router, der die Übertragung von Sprungparametern zwischen Komponenten implementiert
Dieser Artikel stellt hauptsächlich den Sprung zwischen Komponenten im Vue-Router und die Parameterübertragungsmethode vor. Ich hoffe, dass er jedem helfen kann.
Verwenden Sie VueRouter, um zwischen Komponenten zu springen: Parameterübertragung, der spezifische Inhalt lautet wie folgt
Anmeldung ---Benutzername--->main
①Absender und Empfänger löschen
②Konfigurieren Sie die Routing-Adresse des Empfängers
{path:'/myTest',component:TestComponent}
-->
{path:' /myTest/:id' ,component:TestComponent}
③Der Empfänger erhält die übergebenen Daten
this.$route.params.id
④Jump Beim Übertragen Parameter senden
this .$router.push('/myTest/20')
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</p>
<script>
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
<p>
<h1>主页面用户名:{{uName}}</h1>
</p>
`,
//挂载该组件时自动拿到数据
beforeMount:function(){
//接收参数
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//创建登录页面组件
var myLogin = Vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳转到主页面，并将用户输入的名字发送过去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
<p>
<h1>登录页面</h1>
<input type="text" v-model="userInput" placeholder="请输入用户名">
<button @click="toMain">登录到主页面</button>
<br>
<router-link :to="'/main/'+userInput">登录到主页面</router-link>
</p>
`
})
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
<router-link to="/login">返回登录页</router-link>
</p>
`
})
//配置路由词典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myName",component:myMain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参练习</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!-- -->
<router-view></router-view>
</p>
<script>
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
<p>
<h4>这是列表页</h4>
<ul>
<li v-for="(tmp,index) in productList">
//将index传递过去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</p>
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
<p>
<h4>这是详情页</h4>
<p>这是id为：{{myIndex}}的产品</p>
</p>
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
</p>
`
})
// 配置路由词典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>Lernen über vue.js Für Tutorials klicken Sie bitte auf die spezielle Lernkomponente vue.js Tutorial und Tutorial zum Lernen der Vue.js-Front-End-Komponente zum Lernen.
Verwandte Empfehlungen:
Drei Vue-Router-Methoden zum Springen zwischen Komponenten
Detaillierte Erläuterung des Vue-Router-Routings und Seitennavigation
Das obige ist der detaillierte Inhalt vonInformationen zum Vue-Router, der die Übertragung von Sprungparametern zwischen Komponenten implementiert. 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
1385
52
So installieren Sie die DirectPlay-Komponente der alten Windows 10-Version
Dec 28, 2023 pm 03:43 PM
Viele Benutzer stoßen beim Spielen einiger Spiele unter Win10 immer auf Probleme, wie z. B. ein Einfrieren des Bildschirms und unscharfe Bildschirme. Zu diesem Zeitpunkt können wir das Problem lösen, indem wir die Directplay-Funktion aktivieren, und die Bedienungsmethode der Funktion ist ebenfalls sehr einfach. So installieren Sie DirectPlay, die alte Komponente von Win10 1. Geben Sie „Systemsteuerung“ in das Suchfeld ein und öffnen Sie es. 2. Wählen Sie große Symbole als Anzeigemethode. 3. Suchen Sie nach „Programme und Funktionen“. 4. Klicken Sie links, um oder zu aktivieren Win-Funktionen ausschalten 5. Wählen Sie hier die alte Version aus. Aktivieren Sie einfach das Kontrollkästchen
In meiner Vue-Anwendung ist der Vue-Router-Fehler „NavigationDuplicated: Vermeidung redundanter Navigation zum aktuellen Standort' aufgetreten. Wie kann ich ihn beheben?
Jun 24, 2023 pm 02:20 PM
Der Vue-Router-Fehler „NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation“ ist in der Vue-Anwendung aufgetreten – wie kann er behoben werden? Vue.js wird als schnelles und flexibles JavaScript-Framework in der Front-End-Anwendungsentwicklung immer beliebter. VueRouter ist eine Codebibliothek von Vue.js, die für die Routing-Verwaltung verwendet wird. Allerdings manchmal
Wie implementiert man eine Kalenderkomponente mit Vue?
Jun 25, 2023 pm 01:28 PM
Vue ist ein sehr beliebtes Front-End-Framework. Es bietet viele Tools und Funktionen wie Komponentisierung, Datenbindung, Ereignisbehandlung usw., die Entwicklern beim Erstellen effizienter, flexibler und einfach zu wartender Webanwendungen helfen können. In diesem Artikel werde ich vorstellen, wie man eine Kalenderkomponente mit Vue implementiert. 1. Anforderungsanalyse Zunächst müssen wir die Anforderungen dieser Kalenderkomponente analysieren. Ein einfacher Kalender sollte über die folgenden Funktionen verfügen: Anzeige der Kalenderseite des aktuellen Monats; Unterstützung des Wechsels zum vorherigen oder nächsten Monat; Unterstützung beim Klicken auf einen bestimmten Tag;
Grundlagen der VUE3-Entwicklung: Verwendung von Erweiterungen zum Erben von Komponenten
Jun 16, 2023 am 08:58 AM
Vue ist derzeit eines der beliebtesten Front-End-Frameworks, und VUE3 ist die neueste Version des Vue-Frameworks. Im Vergleich zu VUE2 bietet VUE3 eine höhere Leistung und ein besseres Entwicklungserlebnis und ist für viele Entwickler zur ersten Wahl geworden. In VUE3 ist die Verwendung von Erweiterungen zum Erben von Komponenten eine sehr praktische Entwicklungsmethode. In diesem Artikel wird erläutert, wie Erweiterungen zum Erben von Komponenten verwendet werden. Was heißt erweitert? In Vue ist Extends ein sehr praktisches Attribut, das für untergeordnete Komponenten verwendet werden kann, um von ihren Eltern zu erben.
Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen
Mar 15, 2024 pm 04:51 PM
Das Standardanzeigeverhalten für Komponenten im Angular-Framework gilt nicht für Elemente auf Blockebene. Diese Designwahl fördert die Kapselung von Komponentenstilen und ermutigt Entwickler, bewusst zu definieren, wie jede Komponente angezeigt wird. Durch explizites Festlegen der CSS-Eigenschaft display kann die Anzeige von Angular-Komponenten vollständig gesteuert werden, um das gewünschte Layout und die gewünschte Reaktionsfähigkeit zu erreichen.
So öffnen Sie die Einstellungen der alten Version von Win10-Komponenten
Dec 22, 2023 am 08:45 AM
Die alten Win10-Komponenten müssen vom Benutzer selbst aktiviert werden, da viele Komponenten standardmäßig geschlossen sind. Der Vorgang ist sehr einfach Versionskomponenten? Öffnen 1. Klicken Sie auf Start und dann auf „Win-System“. 2. Klicken Sie, um die Systemsteuerung aufzurufen. 3. Klicken Sie dann auf das Programm unten. 4. Klicken Sie auf „Win-Funktionen aktivieren oder deaktivieren“. 5. Hier können Sie auswählen, was Sie möchten öffnen
Vue und Vue-Router: Wie teilt man Daten zwischen Komponenten?
Dec 17, 2023 am 09:17 AM
Vue und Vue-Router: Wie teilt man Daten zwischen Komponenten? Einführung: Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Vue-Router ist der offizielle Routing-Manager von Vue, der zur Implementierung von Single-Page-Anwendungen verwendet wird. In Vue-Anwendungen sind Komponenten die Grundeinheiten zum Erstellen von Benutzeroberflächen. In vielen Fällen müssen wir Daten zwischen verschiedenen Komponenten austauschen. In diesem Artikel werden einige Methoden vorgestellt, die Ihnen beim Datenaustausch in Vue und Vue-Router helfen
Vue-Komponentenpraxis: Entwicklung von Paging-Komponenten
Nov 24, 2023 am 08:56 AM
Vue-Komponentenpraxis: Einführung in die Entwicklung von Paging-Komponenten In Webanwendungen ist die Paging-Funktion eine wesentliche Komponente. Eine gute Paginierungskomponente sollte einfach und klar in der Darstellung sein, reich an Funktionen und leicht zu integrieren und zu verwenden sein. In diesem Artikel stellen wir vor, wie Sie mit dem Vue.js-Framework eine hochgradig anpassbare Paging-Komponente entwickeln. Wir erklären anhand von Codebeispielen ausführlich, wie man mit Vue-Komponenten entwickelt. Technologie-Stack Vue.js2.xJavaScript (ES6) HTML5- und CSS3-Entwicklungsumgebung
