So verwenden Sie Routing durch direkte Referenzierung von vue.js
Zitieren Sie direkt die Methode zur Verwendung von Routing in vue.js: Führen Sie zuerst [vue.JS] und [vue-router.JS] ein, erstellen Sie dann das gemountete Dom-Element und erstellen Sie dann die Route und erstellen Sie den Router Instanz; Erstellen Sie abschließend eine Vue-Instanz und mounten Sie sie.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.
【Empfohlene verwandte Artikel: vue.js】
So verwenden Sie Routing durch direktes Zitieren von vue.js:
Es ist sehr einfach, Routing durch direktes Einführen von vue.js zu verwenden, Sie müssen es nur tun Führen Sie direkt ein anderes einvue-router.JS Das ist es.
Spezifische Implementierungsschritte:
1, Einführung von vue.JS und vue-router.JS
<script src="https://unpkg.com/vue/dist/vue.js"> </script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"> </script>
2, Erstellen eines gemounteten Dom-Elements
<div id="app"></App>
3, Erstellen einer Routing-Komponente
const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}4, Route definieren
const routes = [
{ path: '/hash1', component: com1 },
{ path: '/hash2', component: com2 }
]5, Router-Instanz erstellen
const router = new VueRouter({
routes
})6, Vue-Instanz erstellen und mounten
const App = new Vue({
router
}).$mount('#app');Das Folgende ist der spezifische Code:
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Document
</title>
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">
</script>
</head>
<body>
<div id="app">
<h1>
Hello !
</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/hash1">
切换至 com1
</router-link>
<router-link to="/hash2">
切换至 com2
</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view>
</router-view>
<!-- router-link 上的其他属性: -->
<!-- 设置 replace 属性的话, 当点击时, 会调用 router.replace() 而不是 router.push(), 导航后不会留下
history 记录. -->
<!-- <router-link :to="{ path:'/abc'}" replace></router-link> -->
<!-- 有时候想要 <router-link> 渲染成某种标签, 例如 <li>. 于是我们使用
tag prop 类指定何种标签, 同样它还是会监听点击, 触发导航. -->
<!-- <router-link to="/foo" tag="li">foo</router-link> -->
<!-- active-class 设置 链接激活时使用的 CSS -->
<!-- event 声明可以用来触发导航的事件. 可以是一个字符串或是一个包含字符串的数组. -->
</div>
</body>
<script>
// 1. 定义 (路由) 组件.
const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}
// 2. 定义路由
// 每个路由应该映射一个组件. 其中 "component" 可以是 通过 Vue.extend()
// 创建的组件构造器, 或者, 只是一个组件配置对象.
const routes = [{
path: '/hash1',
component: com1
},
{
path: '/hash2',
component: com2
}]
// 3. 创建 router 实例, 然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例.
// 要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
const App = new Vue({
router
}).$mount('#app'); //el 是自动挂载, mount 是手动挂载(延时)
</script>
</HTML>Verwandte Lernempfehlungen: js-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routing durch direkte Referenzierung von vue.js. 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
1378
52
So beheben Sie kein Internet-Sicherheitsproblem unter Windows 11/10
May 11, 2023 pm 10:07 PM
Eines der Probleme mit der Internetverbindung, die auf Computern mit Windows 11/10 auftreten, ist die Fehlermeldung „Kein Internet, sicher“. Grundsätzlich bedeutet diese Fehlermeldung, dass das System mit dem Netzwerk verbunden ist, Sie jedoch aufgrund von Verbindungsproblemen keine Webseiten öffnen und keine Daten empfangen können. Dieser Fehler kann beim Herstellen einer Verbindung zu einem beliebigen Netzwerk in Windows auftreten, vorzugsweise wenn Sie über einen WLAN-Router, der sich nicht in der Nähe befindet, eine Verbindung zum Internet herstellen. Wenn Sie das WLAN-Symbol in der unteren rechten Ecke der Taskleiste überprüfen, sehen Sie normalerweise ein kleines gelbes Dreieck. Wenn Sie darauf klicken, wird die Meldung „Kein Internet, Sicherheit“ angezeigt. Es gibt keinen konkreten Grund, warum diese Fehlermeldung auftritt, aber Änderungen an den Konfigurationseinstellungen können dazu führen, dass Ihr Router keine Verbindung herstellen kann
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
3 Möglichkeiten, den Router-Kontaktverlust aufgrund eines NTP-Zeitserverfehlers zu beheben
May 22, 2023 pm 03:43 PM
Verbindungs- und WLAN-Probleme können sehr frustrierend sein und die Produktivität erheblich beeinträchtigen. Computer verwenden das Network Time Protocol (NTP) zur Uhrensynchronisation. In den meisten Fällen, wenn nicht sogar in allen, verwendet Ihr Laptop NTP zur Zeiterfassung. Wenn Ihr Server aufgrund einer NTP-Zeitserver-Fehlermeldung den Kontakt verloren hat, lesen Sie diesen Artikel bis zum Ende, um zu erfahren, wie Sie das Problem beheben können. Was passiert, wenn die Uhrzeit des Routers falsch eingestellt ist? Die Leistung des Routers wird im Allgemeinen nicht durch falsche Zeiteinstellungen beeinträchtigt, sodass Ihre Verbindung möglicherweise nicht beeinträchtigt wird. Es können jedoch einige Probleme auftreten. Dazu gehören: Falsche Zeit für alle Geräte, die den Router als lokalen Zeitserver nutzen. Die Zeitstempel in den Router-Protokolldaten sind falsch. wenn wegen
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
![So beheben Sie, dass die WLAN-Verbindung auf dem iPhone immer wieder unterbrochen wird [Gelöst]](https://img.php.cn/upload/article/000/887/227/168456214865307.png?x-oss-process=image/resize,m_fill,h_207,w_330)
So beheben Sie, dass die WLAN-Verbindung auf dem iPhone immer wieder unterbrochen wird [Gelöst]
May 20, 2023 pm 01:55 PM
Viele iPhone-Benutzer haben ihre Frustration über eines der schwerwiegenden Probleme geäußert, mit denen sie auf ihrem iPhone konfrontiert sind. Das Problem ist, dass ihr iPhone hin und wieder die Verbindung zum WLAN trennt. Dies ist in der Tat ein großes Problem, da WLAN für die Nutzung der meisten Apps auf Ihrem iPhone erforderlich ist. Wir haben dieses Problem gründlich analysiert, die möglicherweise dafür verantwortlichen Faktoren identifiziert und sie unten aufgeführt. Die Einstellungen für die automatische Verbindung sind deaktiviert. Einige Probleme in den Netzwerkeinstellungen. Wi-Fi-Passwort ändern. Probleme mit dem Wi-Fi-Router geändert. Nachdem wir die oben genannten Faktoren untersucht haben, haben wir eine Reihe von Lösungen zusammengestellt, mit denen Verbindungsprobleme bei Wi-Fi-Problemen auf dem iPhone behoben werden können. Fix 1 – Aktivieren Sie die automatische Verbindungseinstellung von Wi-Fi, wenn Wi-Fi nicht aktiviert ist
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
Kann Routing zur Abwehr von ARP-Spoofing, zur Unterdrückung von Broadcast-Stürmen und zur Abwehr von Intranetviren eingesetzt werden?
May 22, 2023 am 08:52 AM
Die hier erwähnten Routen kosten mehr als tausend Yuan, und wir werden nicht über Routen unter tausend Yuan sprechen. Heutzutage geben viele Enterprise-Router an, über eine solche Funktion zu verfügen, aber eine solche Funktion erfordert eine Voraussetzung, das heißt, der Computer muss direkt mit dem Router verbunden sein. Wenn er durch einen Switch getrennt ist, sind diese Funktionen für den Computer nutzlos. Probleme wie Broadcast Storms und ARP-Spoofing im LAN sind keine großen Probleme, aber sehr ärgerlich. Es ist nicht schwierig, Broadcast Storms, ARP-Spoofing oder Netzwerkschleifen zu lösen. Die Schwierigkeit liegt darin, diese Probleme zu erkennen. Empfehlen Sie für unser System das Plugin „Buddha Nature“. Der Grund, warum wir „Buddha-Natur“ sagen, liegt darin, dass diese Erkennungsfunktion auf dem Internet-Verhaltensmanagement und dem Kern der Netzwerküberwachungsdatenanalyse basiert und nur das Internet-Verhaltensmanagement hätte platzieren können
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
