2-Vue CRUD การสร้างหน้า และการลิ้งค์หน้าด้วย Vue Router

Sep 25, 2020

ในส่วนนี้จะเป็นการสร้างหน้าแต่ละหน้า และการลิ้งค์หน้าโดยใช้ vue router

เราได้ทำการติดตั้งโปรแกรมและสร้างโปรเจ็ค Vue เป็นที่เรียบร้อยแล้ว ในตอนนี้เราจะเริ่มทำการสร้างหน้าตาเว็บไซต์และส่งค่าระหว่างหน้ากัน การลิ้งค์หน้าที่จะสอนนี้จะเป็นการลิ้งค์ในรูปแบบของ router คือการสร้าง path link ของ url

ทำความรู้จักกับ package.json และ node_modules กันก่อน

package.json ทำหน้าที่เก็บชื่อ package ของ node_module ที่เราโหลดมาใช้
node_module ก็คือที่เก็บ library javascript สำเร็จรูปที่คนอื่นพัฒนามาให้เรานำไปใช้ จะเรียกว่า npm ก็ได้

library javascript สามารถโหลดใหม่ได้เรื่อยๆ หากตัว package.json ได้บันทึกไว้ ว่าโปรเจ็คนี้ใช้ library อะไรบ้าง ผ่านคำสั่ง npm install

เริ่มติดตั้ง Library ของ Vue Router

> npm install vue-router

เปิด Terminal ด้วยคีย์ลัด Ctrl + Shift + ~

สร้าง Components 2 ตัว

เริ่มจากสร้างไฟล์หน้าแต่ละหน้าไว้ในโฟลเดอร์ src/components ของโปรเจ็ค โดยแต่ละหน้าชื่อ CheckList.vue กับ StudentList.vue

/src
|_/components
  |_CheckList.vue // หน้าสำหรับแสดงข้อมูลรายชื่อนักศึกษาทั้งหมด
  |_StudentList.vue // หน้าสำหรับเพิ่มรายชื่อนักศึกษาทั้งหมด

โดยแต่ละหน้าจะให้ใส่โค้ดดังนี้

CheckList.vue

<template>
  <div>
    <h3>หน้าแสดงข้อมูลรายชื่อนักศึกษา</h3>
  </div>
</template>

<script>
export default {};
</script>

StudentList.vue

<template>
  <div>
    <h3>หน้าเพิ่มข้อมูลรายชื่อนักศึกษา</h3>
  </div>
</template>

<script>
export default {
  
};
</script>

ประกาศ path หน้าใน main.js

หน้า main.js จะเป็นหน้าหลักในการลิ้งค์ components เข้าด้วยกัน โดยหน้านี้จะถูกสร้างเอาไว้อยู่แล้วตอนเริ่มโปรเจ็ค เราสามารถประกาศ Vue Router เพื่อใช้ในการกำหนด path ให้ components ได้

/src
|_main.js

Main.js

// main.js
import Vue from "vue";
import VueRouter from 'vue-router';import App from "./App.vue";
import CheckList from "./components/CheckList.vue";
import StudentList from "./components/StudentList.vue";Vue.use(VueRouter);const routes = [
  {
    name: "CheckList",
    path: "/check_list",
    component: CheckList
  },
  {
    name: "StudentList",
    path: "/student_list",
    component: StudentList
  }
];const router = new VueRouter({ mode: "history", routes: routes });Vue.config.productionTip = false;new Vue({
  render: h => h(App),
  router
}).$mount("#app");

เรียกใช้ router ในหน้า App.vue

App.vue

<template>
  <div>
    <!-- ส่วนเรียก Router -->
    <div>
      <router-link :to="{name: 'CheckList'}" class="nav-link">รายชื่อนักศึกษา</router-link>
    </div>
    <div>
      <router-link :to="{name: 'StudentList'}" class="nav-link">เพิ่มรายชื่อนักศึกษา</router-link>
    </div>

    <!-- ส่วนแสดงผลของ Router ที่เลือก หรือก็คือ body นั้นเอง -->
    <router-view></router-view>
  </div>
</template>