VueでWebアプリ作成#2:Topページの修正

前回の続きです。
今回はTopページを変更します。

作成したVue Cliプロジェクトのデフォルトのソースを書き替えていきます。

HomeView.vueのファイル名を変更し、デフォルトのソースを消してゼロから書いています。

TopView.vue

<template>
   <div class="top">
     <h1>これはTopページです！</h1>
   </div>
</template>

<script>
  export default({
     name:"TopView"
  });
</script>

リンクのテキストをTopに変更、styleにはscssを設定しています。

App.vue

<template>
  <nav>
    <router-link to="/">Top</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>
<style lang="scss">
</style>

ルーティングもTopViewに変更しています。

router/index.js

import { createRouter, createWebHistory } from "vue-router";
import TopView from "../views/TopView.vue";

const routes = [
  {
    path: "/",
    name: "top",
    component: TopView,
  },
  {
    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/AboutView.vue"),
  },
];

とても簡単な変更でした。
ここをどんどん変えていって、それなりのWebアプリにしたいと思います。