Vue Routerを使用することでURLごとに違うコンポーネントを表示することができる

Vue Routerのインストール

npm install vue-router@3

yarn add vue-router

Vue Routerとは

パスに対応するコンポーネントを表示することができる

アプリケーションをSPAかできる

Router処理の記述場所

一般的にはrouter.js というファイルを生成し処理を書いていく

router.jsの基本構文

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home";
import Users from "./views/Users";

Vue.use(Router); // ライブラリを使用

// Routerの設定をexport
export default new Router({
  // オブジェクトの配列を生成し、オブジェクト内にパスを対応するコンポーネントを設定する
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/users",
      component: Users,
    },
  ],
});

パスに紐ずくComponentをApp.vueに適応させるには

router-viewコンポーネントを使用する

動的コンポーネントのような動きをする

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

hashモードとhistoryモード

hashモード デフォルト