[Vue.js] vue-router v4.x with Vue3 (1)

1.vue-routerとは
公式サイトによると、Vue RouterはVueです.Vueはjsの公式ルータとして機能します.Vueはjsを使用した単一ページアプリケーションを作成しやすくします.jsのコアと密接に統合されているそうです.
2)Vue Router機能
vue routerの機能は次のとおりです.
1)ネストされたルーティング/ビューのマッピング
2)コンポーネントベースのモジュール化ルーティング設定
3)ルータパラメータ、クエリー、ワイルドカード
4) Vue.jsを使用した管理システムの管理効果
5)入念なナビゲーション制御
6)アクティブCSSクラスへのリンクの自動追加
7)HTML 5履歴モードまたはハッシュモード(IE 9自動ロールバック)
8)スクロール動作のカスタマイズ
上記の機能については,後述する位置決めにおいて例とともに詳細に議論する.
2.インストール
1) NPM

npm i vue-router@4

2) yarn

yarn add vue-router@4

3)直接ダウンロード/CDN
https://unpkg.com/vue-router@4
バージョン/タグの例)
https://unpkg.com/[email protected]/dist/vue-router.global.js
3.開始
routerを管理するには、routerを追加するために別のファイルを作成する必要があります.
routerに関連付けられた構成部品をsrc/viewsフォルダに移動します.
src/routes/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'
import Create from '../views/Create.vue'
import Mypage from '../views/Mypage.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Home },
        { path: '/create', component: Create },
        { path: '/mypage', component: Mypage },
    ]
})
export default router;

createRoutercreateWebHistoryはv 4です.これはxから導入されたVueルータを使用するために必要とされる方法である.createRouter:ルータの作成createWebHistory:履歴モードの1つであるHTML 5モード(旧バージョンの履歴モードと同じ)
ファイルが作成されている場合はindex.jsで作成されたルータがメインです.jsに登録します.
main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'
import "./assets/css/main.css"

createApp(App).use(router).mount('#app')

生成されたvue appにルータを接続します.
注-Vue Router公式ドキュメント
https://next.router.vuejs.org/guide/