😉

Vite で作成したアプリのVue-routerの設定方法

2021/12/19に公開

Vue.js

Vite

Vue Router

tech

爆速過ぎるviteのビルド

今まで、vueアプリの作成には、cliを使っていたが、もう使えない。
だって速過ぎるんだもん。

viteを使ったvueアプリ設定の仕方は、
あちこちで解説あるので、そちら↓を参考されたし。

今回は、vue-routerの設定で若干はまったので、
メモがてらこちらに残す。ちなみに参考記事は↓

ちなみにvue-routerのバージョンは^4.0.12
インストールするときは
$npm install vue-router@4

vueRouter はdefault exportを提供してなかった

まず、つものノリでrouter/index.jsにこんな感じで書いた。

router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../components/Home.vue";

const routes = [
  {
    path: "/",
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

createWebHistory()のとこでエラーが出て、
画面が表示されない。ので
こんな感じで書き換える。

router/index.js

import * as vueRouter from "vue-router";
import Home from "../components/Home.vue";

const routes = [
  {
    path: "/",
    component: Home,
  },
];

const router = vueRouter.createRouter({
  history: vueRouter.createWebHistory(),
  routes,
});

export default router;

知らなかった。
version4.0で変わったのかな？？
まずは、ライブラリを使えるようになって何より。

爆速過ぎるviteのビルド

vueRouter はdefault exportを提供してなかった

Discussion