vue js one page template

VueJS
Created At :
Views 👀 :

การสร้างเทมเพลตหน้าเว็บเดียว (One Page Template) ใน Vue.js คล้ายกับการสร้างหน้าเว็บปกติ แต่ในกรณีนี้คุณจะมีเพียงหน้าเว็บเดียวที่แสดงเนื้อหาหลายหน้าโดยใช้การนำเสนอข้อมูลแบบไล่ลำดับ (scrolling) หรือการนำเสนอข้อมูลแบบแทป (tabbed interface) เพื่อแสดงข้อมูลที่แตกต่างกันบนหน้าเว็บเดียว.

นี่คือตัวอย่างการสร้าง One Page Template ใน Vue.js:

  1. สร้าง Vue Project:

ถ้าคุณยังไม่มีโปรเจกต์ Vue สามารถใช้ Vue CLI เพื่อสร้างโปรเจกต์ Vue ใหม่ได้ดังนี้:

1
vue create one-page-app
  1. สร้าง Component สำหรับแต่ละหน้า:

สร้าง component สำหรับแต่ละหน้าของ One Page Template ของคุณ เช่นหากคุณมีหน้าแรกและหน้าสองคุณสามารถสร้างสอง component ได้เช่นนี้:

1
2
vue generate component Page1
vue generate component Page2
  1. แก้ไข Component Templates:

แก้ไข template ของแต่ละ component เพื่อใส่เนื้อหาที่คุณต้องการแสดงในแต่ละหน้า:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Page1.vue -->
<template>
  <div>
    <h1>Page 1</h1>
    <!-- เนื้อหาหน้าแรก -->
  </div>
</template>

<!-- Page2.vue -->
<template>
  <div>
    <h1>Page 2</h1>
    <!-- เนื้อหาหน้าสอง -->
  </div>
</template>
  1. สร้าง Navigation Menu:

สร้างการนำทางหรือเมนูนำทางที่อนุญาตให้ผู้ใช้เปลี่ยนและเลือกหน้าของ One Page Template:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- App.vue -->
<template>
  <div>
    <nav>
      <ul>
        <li><router-link to="/page1">Page 1</router-link></li>
        <li><router-link to="/page2">Page 2</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

ในตัวอย่างนี้เราใช้ Vue Router เพื่อสร้างการนำทางไปยังหน้าแต่ละหน้าของ One Page Template.

  1. ตั้งค่า Vue Router:

ให้ตั้งค่า Vue Router เพื่อใช้งานการนำทาง:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

Vue.config.productionTip = false

Vue.use(VueRouter)

const routes = [
  { path: '/page1', component: Page1 },
  { path: '/page2', component: Page2 }
]

const router = new VueRouter({
  routes
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
  1. รันแอปพลิเคชัน:

เมื่อคุณเสร็จสิ้นการกำหนดค่า One Page Template ของคุณ ให้รันแอปพลิเคชัน Vue ด้วยคำสั่ง:

1
npm run serve

หรือ

1
yarn serve

แล้วเข้าถึงแอปพลิเคชันในเบราว์เซอร์ของคุณ คุณจะสามารถเข้าถึงหน้าแต่ละหน้าของ One Page Template ผ่านการคลิกที่ลิงก์ในเมนูนำทาง.

นี่คือวิธีการสร้าง One Page Template ใน

Vue.js และใช้ Vue Router เพื่อจัดการการนำทางระหว่างหน้าและแสดงเนื้อหาในหน้าแต่ละหน้าของแอปพลิเคชันของคุณ.

©2023 Love Computer