Vue Routerを使って簡単なSPAを作成してみる

こんにちは。

キャベツ村代表エンジニアのヒーコです。

今回はvueを使ってめちゃ簡単なSPAを実装していきます。

まず、

Vue Routerとは

SPA(シングルアプリケーション)構築のための、ルーティングライブラリです。

vue.jsそのものに、URLを管理させる、SPAの構築には欠かせません。

SPA(シングルページアプリケーション)とは

そもそもSPAとはなんなのか。。

SPA(シングルアプリケーション)とは、初めにひとつのHTMLをロードし、以後はユーザーインタラクションに応じて、Ajaxで情報を取得し、動的にページを更新するwebアプリケーションのことです。

では実際に、実装していきます!

Vue Router  インストール

まず、Vue Routerのインストール。今回はyarnを使用していたので。。

yarn add vue-router

インストールできました!

root@3458463aefeae:/hi-ko/front# yarn add vue-router
yarn add v1.21.1
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "linux" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @coreui/coreui@3.0.0" has unmet peer dependency "perfect-scrollbar@^1.5.0".
warning " > @coreui/coreui@3.0.0" has unmet peer dependency "@popperjs/core@^2.0.6".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-router@3.1.6
info All dependencies
└─ vue-router@3.1.6
Done in 11.77s.

ちなみに、フォルダの階層は、こんなかんじになっています。

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">とっぷ</router-link>
      <router-link to="/Users">ゆーざーいちらん</router-link>
    </div>
    <router-view />
  </div>
</template>
・
・
・
・

UserList.vue

<template>
  <div id="nav">たなか・はなこ・とおる・ひとみ</div>
</template>

・
・
・
・

main.ts

import "core-js/stable";
import "regenerator-runtime/runtime";
import "@/sass/style.scss";
import Vue, { VNode } from 'vue';
import CoreuiVue from "@coreui/vue";
import router from './routes';     ////追加
import App from "./App.vue";

Vue.use(CoreuiVue);

new Vue({
  router,       ////追加
  render: (h): VNode => h(App)
}).$mount('#app')

routes.ts //追加

import Vue from 'vue'
import VueRouter from 'vue-router';
import UserList from "./components/pages/UserList.vue";

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/Users',
      component: UserList
    }
  ]
});

export default router

これで、とても簡単なものですが、vueのSPAが動くはずです!

何かあればコメントいただけると幸いです

最後まで読んでいただきありがとうございました

 

 

label, , , ,

書いた人

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です