【ララはじ #6】 Vue3で画面遷移はじめました。

ちょっと、Web系の開発から離れていたので、今時どんな感じになってるのかを確認する為にいろいろやってみた備忘録です。

築山五郎の人生語録より

この辺りは、前と同じでしょ？そのままの知識でやってみます。
以前に、フロントエンドはVueに全振りしてるので、ルーティングはVue側でやらなければならないわけで、Vue Router をインスト−ルしていきます。

% sail npm install vue-router --save-dev

画面遷移という位なので、最低でも2画面は必要ですから、ダッシュボード画面を作ります。
ヘッダー、フッター、サイドバーとメイン画面の構成で作ってみます。

ヘッダーは、resources/js/components/layouts/Header.vue  に作ります。
（というか、ディレクトリ構成は思いつきで、深い意味は無いです

<template>
  <v-app-bar app>
    <v-app-bar-nav-icon>
    </v-app-bar-nav-icon>
    <v-toolbar-title>
      お試しシステム
    </v-toolbar-title>
  </v-app-bar>
</template>

次に、フッターを resources/js/components/layouts/Footer.vue に作成です。

<template>
  <v-footer app elevation="4">
    <v-col cols="12" class="text-right">
      <span>© {{ new Date().getFullYear() }} - ララはじ</span>
    </v-col>
  </v-footer>
</template>

同様に、サイドバーを resources/js/components/layouts/Sidebar.vue に作ります。

<template>
  <v-navigation-drawer app elevation="4">
  </v-navigation-drawer>
</template>

最後にメイン画面は、 resources/js/components/pages/Dashboard.vue に書き込みます。

<template>
  <v-app>
    <Header></Header>
    <Sidebar></Sidebar>
    <v-main>
      <v-card class="ma-4">
        <v-card-title>
          <h1>Laravel9、さわり始めました。</h1>
        </v-card-title>
      </v-card>
    </v-main>
    <Footer></Footer>
  </v-app>
</template>

<script>
import Header from '@/components/layouts/Header.vue';
import Footer from '@/components/layouts/Footer.vue';
import Sidebar from '@/components/layouts/Sidebar.vue';

export default {
  components: {
    Header,
    Footer,
    Sidebar,
  }
}
</script>

これで、ログイン画面とダッシュボード画面の2つが出来たので、ルーティングを記述します。
とりあえず、ログイン画面を最初のページにする感じで、resources/js/router/index.js に記述します。

import { createRouter, createWebHistory } from 'vue-router';

import Login from '@/components/pages/Login.vue';
import Dashboard  from '@/components/pages/Dashboard.vue';

const routes = [
  {
    name: "login",
    path: "/",
    component: Login,
  },
  {
    name: "dashboard",
    path: "/dashboard",
    component: Dashboard,
  },
];

const router = createRouter({
  routes,
  history: createWebHistory(),
});

export default router;

ログイン画面で、ログインボタンをクリックしたら、ダッシュボード画面へ遷移するように記載します。ファイルは、resources/js/components/pages/Login.vue になります。

(中略)...

<v-card-actions>
  <v-spacer></v-spacer>
  <v-btn variant="flat" color="deep-purple-accent-4" @click="login">  <!-- ここ -->
    {{ "ログイン" }}
  </v-btn>
</v-card-actions>

(中略)...

<script>
export default {
  name:"login",
  data(){
    return {
      showPassword : false,
      auth:{
        email:"",
        password:""
      },
    }
  },
  // ↓ ここから
  methods: {
    login() {
      this.$router.push('/dashboard')
    }
  },
  // ↑ ここまで
}
</script>

最後に、スタート画面を修正します。
resources/js/components/App.vue を修正します。

<template>
  <router-view></router-view>
</template>

そして、スタートアップのスクリプトにRouterを追記しスタート画面の変更をします。resources/js/app.js です。

import './bootstrap';
import { createApp } from "vue";
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import '@mdi/font/css/materialdesignicons.css';
import App from '@/components/App.vue';     // <-- ここ
import router from '@/router';              // <-- ここ

const app = createApp(App);
const vuetify = createVuetify();
app.use(router);                            // <-- ここ
app.use(vuetify);
app.mount("#app");

これで、ログインボタンをクリックすると、ダッシュボード画面に遷移してくれるはず…

ふぅ。

このあたりは、そのままの感じで行けてよかった。
ちなみに、http://localhost/dashboard とかに普通にアクセスできるので、まぁ、ここからログイン認証とか認証チェックを考えないといけない辺りも、変わってない感じかな？