So verwenden Sie den Vue-Router in Vue3-View.js-php.cn

So verwenden Sie den Vue-Router in Vue3

王林

Freigeben： 2023-05-30 18:07:12

nach vorne

2365 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

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!