vue-router設定の書き方はVue２とVue３で異なるっぽい

Vue2だと、こんな感じ。（router.jsの中身）

import Vue from 'vue'
import Router from 'vue-router'
import MyHome from './pages/MyHome.vue'
import MyLanding from './pages/MyLanding.vue'

Vue.use(Router)

export default new Router({
    routes:[
        { path: '/', components: MyHome},
        { path: '/landing', components: MyLanding}
    ]
})

このコードをコンパイルすると、こういうエラーが出る。

Uncaught TypeError: Cannot read properties of undefined (reading 'use')

しょうがないから、Vue３出の描き方を検索して変えてやるとこうなる。

import { createRouter, createWebHistory } from 'vue-router'
import MyHome from './pages/MyHome.vue'
import MyLanding from './pages/MyLanding.vue'

const routes = [
    {
        path: "/",
        name: "Home",
        compoents: MyHome
    },
    {
        path: "/landing",
        name: "Landing",
        components: MyLanding
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

こちらで勉強させていただいた。

vue-cliで作成したプロジェクトでVue Routerを設定 | アールエフェクト

コードのどこが違うかというと、
①インポートするやつの名前が、VueRouter, Routerではなく、createRouter, createWebHistory
②パスなどはconst routesで変数として設定
③最後に一気にコンポーネントとしてexportする

②と③は書き方の問題だと思うので、①がVue2とVue3出の違いっぽい。