close

Routing และ Navigation ใน Vue .js- คู่มือฉบับสมบูรณ์

Routing และ Navigation เป็นแนวคิดที่สำคัญใน Vue.js สำหรับการสร้างเพจและการนำทางระหว่างเพจเหล่านั้นในเว็บแอปพลิเคชัน เป็นไลบรารีที่มีประสิทธิภาพและยืดหยุ่นสำหรับการจัดการ ระบบใน .js Vue Router routing Vue

 

นี่คือแนวคิดพื้นฐานที่เกี่ยวข้องกับ route s ใน Vue.js:

  1. Route: A route กำหนดพาธและเชื่อมโยงไปยังคอมโพเนนต์ที่เกี่ยวข้อง แต่ละคน route มีเส้นทางและส่วนประกอบ

  2. Vue Router: เป็นไลบรารีสำหรับจัดการ s ใน .js มีเครื่องมือในการกำหนดและจัดการ s ใน แอปพลิเคชัน Vue Router route Vue route Vue

  3. Route ส่วนประกอบ: แต่ละส่วน route มีส่วนประกอบที่สอดคล้องกัน เมื่อ route เปิดใช้งาน a ส่วนประกอบที่เกี่ยวข้องจะแสดงขึ้น

  4. ไดนามิก Route: ไดนามิก route ช่วยให้คุณกำหนด route s ด้วยพารามิเตอร์ไดนามิก ตัวอย่างเช่น คุณสามารถกำหนด a route ด้วยพาธ "/user/:id" เพื่อแสดงข้อมูลผู้ใช้ด้วย id ที่สอดคล้องกัน

  5. ซ้อนกัน Route: ซ้อนกัน route เป็นแนวคิดที่อนุญาตให้คุณซ้อนลูก route ภายในพาเรน route ต์ ซึ่งช่วยให้คุณสร้าง route โครงสร้างที่ซับซ้อนและจัดระเบียบส่วนประกอบในลักษณะที่ซ้อนกันได้

  6. เปลี่ยนเส้นทาง Route: การเปลี่ยนเส้นทาง route ช่วยให้คุณเปลี่ยนเส้นทางผู้ใช้จากเส้นทางหนึ่งไปยังอีกเส้นทางหนึ่ง สิ่งนี้มีประโยชน์เมื่อคุณต้องการเปลี่ยน route ผู้ใช้จากเส้นทางเก่าไปยังเส้นทางใหม่

  7. Route ยาม: ยาม route เป็นฟังก์ชันที่ให้คุณตรวจสอบและควบคุมการเข้าถึง route s เมื่อใช้ route ตัวป้องกัน คุณสามารถกำหนดเงื่อนไขเพื่อป้องกันไม่ให้ผู้ใช้เข้าถึงบางอย่าง route หรือดำเนินการจัดการพิเศษก่อนเปลี่ยนเส้นทาง

 

หากต้องการใช้ คุณสามารถทำตามขั้นตอนต่อไปนี้: Vue Router

ขั้นตอนที่ 1: ติดตั้ง โดยใช้ npm หรือเส้นด้าย: Vue Router 

npm install vue-router

หรือ 

yarn add vue-router

ขั้นตอนที่ 2: สร้าง ไฟล์ในไดเรกทอรีรากของโปรเจ็กต์ ในไฟล์นี้ เราจะประกาศและกำหนดค่า s ของแอปพลิเคชัน router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

ขั้นตอนที่ 3: ใน main.js ไฟล์ ให้นำเข้า และลิงก์กับ แอปพลิเคชัน: Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

ขั้นตอนที่ 4: ใน ไฟล์ คุณสามารถประกาศ s โดยใช้ คอมโพเนนต์ เช่น,, และคุณสมบัติอื่นๆ router.js route Vue Router path component

ตัวอย่างเช่น คุณสามารถประกาศ route สำหรับหน้าแรกและ route สำหรับหน้าเกี่ยวกับดังนี้:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

ขั้นตอนที่ 5: ใน Vue คอมโพเนนต์ คุณสามารถใช้คอมโพเนนต์ต่างๆ เช่น สร้างลิงก์ไปยัง s อื่นๆ และ แสดงเนื้อหาของไฟล์. <router-link> route <router-view> route

ตัวอย่างเช่น ในเทมเพลตของคอมโพเนนต์หน้าแรก คุณสามารถใช้ เพื่อสร้างลิงก์ไปยังหน้าเกี่ยวกับ: <router-link> 

<router-link to="/about">Go to About</router-link>

ในเทมเพลตของคอมโพเนนต์ App คุณสามารถใช้ เพื่อแสดงเนื้อหาของปัจจุบัน: <router-view> route 

<router-view></router-view>

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