vue3 で vue-router を使用するための完全な手順

序文

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

Vue3 の変更点の多くは、プラグインやライブラリにアクセスする方法を若干変更しますが、これには Vue Router も含まれます。

1. ステップ1: vue-routerをインストールする

[email protected] をインストールします

2. ステップ2: main.js

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

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

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

3. ルーティングファイル

「vue-router」から {createRouter、createWebHashHistory} をインポートします。

定数ルート = [
    {
        パス： '/'、
        コンポーネント: () => import('@/pages')             
    },
    {
        パス: '/test1',
        名前: "test1",
        コンポーネント: () => import('@/pages/test1')   
    },
    {
        パス: '/test2',
        名前: "test2",
        コンポーネント: () => import('@/pages/test2')   
    },
]
エクスポートconst router = createRouter({
  履歴: createWebHashHistory(),
  ルート: ルート
})

デフォルトルーターをエクスポートする

4. アプリ

<テンプレート>
  <ルータービュー></ルータービュー>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
  }
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

4. 使用（ジャンプなど）

ルーティングが必要な場所にuseRouteとuseRouterを導入します（vue2の$routeと$routerに相当）

<スクリプト>
'vue-router' から { useRoute, useRouter } をインポートします。
エクスポートデフォルト{
  設定 （） {
    定数ルート = useRoute()
    定数ルーター = useRouter()
    戻る {}
  },
}

例: ページジャンプ

<テンプレート>
  <h1>私はtest1です</h1>
  <button @click="toTest2">toTest2</button>
</テンプレート>
<スクリプト>
'vue-router' から { useRouter } をインポートします。
エクスポートデフォルト{
  設定 （） {
    定数ルーター = useRouter()
    定数toTest2 = (() => {
      ルータ.push("./test2")
    })
    戻る {
      トテスト2
    }
  },
}
</スクリプト>
<スタイルスコープ>
</スタイル>

要約する

これで、vue-router を使用した vue3 に関するこの記事は終了です。vue-router を使用した vue3 に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: