Heim > Web-Frontend > View.js > Hauptteil

So verwenden Sie den Vue-Router in Vue3

王林
Freigeben: 2023-05-30 18:07:12
nach vorne
2335 Leute haben es durchsucht

1. Schritt eins: vue-router installieren

npm install vue-router@4.0.0-beta.13
Nach dem Login kopieren

2. Schritt zwei: main.js

Vergleichen wir zunächst den Unterschied zwischen main.js in vue2 und vue3: (Das erste Bild ist vue2, das zweite Bild ist vue3 )

So verwenden Sie den Vue-Router in Vue3

So verwenden Sie den Vue-Router in Vue3

Es ist deutlich zu erkennen, dass die Vue-Objekte, die wir üblicherweise in vue2 verwenden, aufgrund der direkten Verwendung der createApp-Methode in vue3 „verschwinden“, aber tatsächlich ist die mit der createApp-Methode erstellte App A Das Vue-Objekt Vue.use(), das häufig in vue2 verwendet wird, kann für die normale Verwendung in vue3 durch app.use() ersetzt werden. Verwenden Sie in der main.js-Datei von vue3 den vue-router, um app.use direkt zu verwenden ( )-Methode zum Aufrufen des Routers.

Hinweis: Der von der Import-Routing-Datei exportierte Routenname stammt aus dem „relativen Pfad der entsprechenden Routing-Datei“. Das Projektverzeichnis lautet wie folgt (vue2 und vue3 sind identisch):

So verwenden Sie den Vue-Router in Vue3

3. Routing-Datei

import { 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 router
Nach dem Login kopieren

4. app.vue

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: &#39;App&#39;,
  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>
Nach dem Login kopieren

4. Verwendung (z. B. Sprung)

Wir führen useRoute und useRouter (entspricht $route und $router in vue2) ein, wo wir Routing verwenden müssen

<script>
import { useRoute, useRouter } from &#39;vue-router&#39;
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
    return {}
  },
}</script>
Nach dem Login kopieren

Beispiel: Seitensprung

<template>
  <h2>我是test1</h2>
  <button>toTest2</button>
</template>
<script>
import { useRouter } from &#39;vue-router&#39;
export default {
  setup () {
    const router = useRouter()
    const toTest2= (() => {
      router.push("./test2")
    })
    return {
      toTest2
    }
  },
}
</script>
<style>
</style>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Vue-Router in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage