"export 'createRouter' was not found in 'vue-router' の解決法

4788 ワード
vue-router Vue.js Vue.js テキストリンク

はじめに

Vue3で作成したプロジェクトでvue-routerを使おうとしたが、なぜかうまくいかず

調べてもあまり情報がなかったのでここに記録することに決めた！

Vue3でvue-routerを入れると、、

npm install vue-router
main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';


const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/teams', component: TeamsList },
        { path: '/users', component: UsersList },
    ]
})

const app = createApp(App)

app.use(router);

app.mount('#app');

 WARNING  Compiled with 2 warnings                                                          23:00:16

 warning  in ./src/main.js

"export 'createRouter' was not found in 'vue-router'

 warning  in ./src/main.js

"export 'createWebHistory' was not found in 'vue-router'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.11.20:8080/

vue-routerがありませんよ！！っと言われる。。なんで？？！

Vue3ではvue-routerも新しくしないとダメ

これらの公式ドキュメントを見ると

npm install vue-router@next

「@next」がついてる！
どうやら今のところはこのコマンドで入れないといけないようです。。。
知らんかったーーーー。エラーメッセージ とかつけといてくれよ。。。