Heim > Artikel > Web-Frontend > Wie verwende ich den Vue-Router mit Vue3?
Für die meisten Single-Page-Anwendungen ist die Verwaltung des Routings eine wesentliche Funktion. Mit der neuen Version von Vue Router in Alpha können wir bereits sehen, wie es in der nächsten Version von Vue funktioniert.
Viele der Änderungen in Vue3 werden die Art und Weise, wie wir auf Plugins und Bibliotheken zugreifen, einschließlich Vue Router, leicht verändern.
npm install vue-router@4.0.0-beta.13
#🎜 🎜##🎜 🎜#
3. Routing-Dateiimport { createRouter, createWebHashHistory } from "vue-router" const routes = [ { path: '/', component: () => import('@/pages') }, { path: '/test1', name: "test1", component: () => import('@/pages/test1') }, { path: '/test2', name: "test2", component: () => import('@/pages/test2') }, ] export const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router4. Verwendung (z. B. Sprung) # 🎜🎜#us Stellen Sie useRoute und useRouter vor, wenn Routing erforderlich ist (entspricht $route und $router in vue2)
<template> <router-view></router-view> </template> <script> export default { name: 'App', components: { } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Beispiel: Seitensprung
<script> import { useRoute, useRouter } from 'vue-router' export default { setup () { const route = useRoute() const router = useRouter() return {} }, }</script>
Das obige ist der detaillierte Inhalt vonWie verwende ich den Vue-Router mit Vue3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!