Vue Routerでルーティングに失敗する

初心者すぎてハマったので残しておく。

以下のコードで http://localhost:8080/index/ にアクセスしてもindexにアクセスできない。
しかも勝手に追加される#（シャープ）って何？ってレベル。

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '@/views/Index.vue';

Vue.use(VueRouter);

const routes =[
{
    path: '/index',
    name: 'index',
    component: Index,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

答えは簡単でルーターモードの設定問題だった。
デフォルトではhashモードになるようで、http://localhost:8080/#/index/ でアクセスできる。
~~ちゃんとドキュメント読めよ~~

上記のコードに mode: 'history' を追加してやれば、
http://localhost:8080/index/
でちゃんとアクセスできる。
ついでに以下のコードみたいにNot Foundのルーティングも作ってしまえばルーティングのミスかコードのミスかすぐわかる。

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '@/views/Index.vue';
import NotFound from '@/views/NotFound.vue';

Vue.use(VueRouter);

const routes =[
{
    path: '/index',
    name: 'index',
    component: Index,
  },
  {
    path: '*',
    component: NotFound,
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

以上です。

参考：
https://router.vuejs.org/ja/api/#mode
http://hiramatch.hatenablog.com/entry/2018/12/05/180729