Vue3 で vue-router を使用するにはどうすればよいですか?

はじめに

管理ルーティングは、ほとんどの単一ページ アプリケーションにとって不可欠な機能です。アルファ版の Vue Router の新しいバージョンでは、Vue の次のバージョンでそれがどのように動作するかをすでに確認し始めることができます。

Vue3 の変更の多くは、Vue Router を含むプラグインやライブラリへのアクセス方法をわずかに変更します。

1. 最初のステップ: vue-router をインストールします

npm install vue-router@4.0.0-beta.13

2. 2 番目のステップ: main.js

まず、vue2 と vue3 の main.js の違いを比較してみましょう: (最初の画像は vue2、2 番目の画像は vue3)

vue2 で一般的に使用されていることがはっきりとわかります。 vue3 では createApp メソッドを直接使用しているため Vue オブジェクトが「消えて」しまいますが、実際には createApp メソッドを使用して作成されたアプリは Vue オブジェクトです。 vue3 通常の使用では、これを app.use() に置き換えます。vue3 の main.js ファイルでは、vue-router を使用して app.use() メソッドを使用してルーターを直接呼び出します。

注: インポート ルーティング ファイルによってエクスポートされるルート名は、「対応するルーティング ファイルの相対パス」からのもので、プロジェクト ディレクトリは次のとおりです (vue2 と vue3 は同じです):

三、ルーティング ファイル

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

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>

4.使用 (ジャンプなど)

useRoute と useRouter を導入します。ルーティングを使用する必要があります (vue2 の $route と $router に相当)

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

例: ページ ジャンプ

<template>
  <h2 id="我是test">我是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>

以上がVue3 で vue-router を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。