[Vue.js]Vue RouterでSPAのルーティング制御

#プロジェクト作成コマンド（今回はvue-router-sampleプロジェクトとする）
vue create vue-router-sample

#マニュアル作成を選択( Manually select featuresを選択 )
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features

#Routerへのチェックを追加
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

#2.xを選択（3.xだと動作しないブラウザがあった為）
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

>(*) Lint on save
 ( ) Lint and fix on commit

> In dedicated config files
  In package.json

#router-sampleと入力
? Save preset as:

cd vue-router-sample
npm run serve

vuex-router-sample/
           ├─ node_modules/
           ├─ public/
           ├─ src/
　　　　　　     ├─ assets/
                ├─ components/
                ├─ router/
                ├─ views/
           ├─ babel.config.js
           ├─ package.json
           ├─ package-lock.json
           ├─ README.md

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; ①

Vue.config.productionTip = false;

new Vue({
  router,　②
  render: (h) => h(App),
}).$mount("#app");

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> | ①
      <router-link to="/about">About</router-link>　②
    </div>
    <router-view />　③
  </div>
</template>

<style>
・・省略
</style>

import Vue from "vue"; ①
import VueRouter from "vue-router";　②
import Home from "../views/Home.vue";　③

Vue.use(VueRouter);　④

const routes = [
  {
    path: "/",
    name: "Home",　　　⑤
    component: Home,
  },
  {
    path: "/about",
    name: "About",　　⑥
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({　⑦
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>