Routing และ Navigation เป็นแนวคิดที่สำคัญใน Vue.js สำหรับการสร้างเพจและการนำทางระหว่างเพจเหล่านั้นในเว็บแอปพลิเคชัน เป็นไลบรารีที่มีประสิทธิภาพและยืดหยุ่นสำหรับการจัดการ ระบบใน .js Vue Router routing Vue
นี่คือแนวคิดพื้นฐานที่เกี่ยวข้องกับ route s ใน Vue.js:
-
Route: A route กำหนดพาธและเชื่อมโยงไปยังคอมโพเนนต์ที่เกี่ยวข้อง แต่ละคน route มีเส้นทางและส่วนประกอบ
-
Vue Router: เป็นไลบรารีสำหรับจัดการ s ใน .js มีเครื่องมือในการกำหนดและจัดการ s ใน แอปพลิเคชัน Vue Router route Vue route Vue
-
Route ส่วนประกอบ: แต่ละส่วน route มีส่วนประกอบที่สอดคล้องกัน เมื่อ route เปิดใช้งาน a ส่วนประกอบที่เกี่ยวข้องจะแสดงขึ้น
-
ไดนามิก Route: ไดนามิก route ช่วยให้คุณกำหนด route s ด้วยพารามิเตอร์ไดนามิก ตัวอย่างเช่น คุณสามารถกำหนด a route ด้วยพาธ "/user/:id" เพื่อแสดงข้อมูลผู้ใช้ด้วย id ที่สอดคล้องกัน
-
ซ้อนกัน Route: ซ้อนกัน route เป็นแนวคิดที่อนุญาตให้คุณซ้อนลูก route ภายในพาเรน route ต์ ซึ่งช่วยให้คุณสร้าง route โครงสร้างที่ซับซ้อนและจัดระเบียบส่วนประกอบในลักษณะที่ซ้อนกันได้
-
เปลี่ยนเส้นทาง Route: การเปลี่ยนเส้นทาง route ช่วยให้คุณเปลี่ยนเส้นทางผู้ใช้จากเส้นทางหนึ่งไปยังอีกเส้นทางหนึ่ง สิ่งนี้มีประโยชน์เมื่อคุณต้องการเปลี่ยน route ผู้ใช้จากเส้นทางเก่าไปยังเส้นทางใหม่
-
Route ยาม: ยาม route เป็นฟังก์ชันที่ให้คุณตรวจสอบและควบคุมการเข้าถึง route s เมื่อใช้ route ตัวป้องกัน คุณสามารถกำหนดเงื่อนไขเพื่อป้องกันไม่ให้ผู้ใช้เข้าถึงบางอย่าง route หรือดำเนินการจัดการพิเศษก่อนเปลี่ยนเส้นทาง
หากต้องการใช้ คุณสามารถทำตามขั้นตอนต่อไปนี้: Vue Router
ขั้นตอนที่ 1: ติดตั้ง โดยใช้ npm หรือเส้นด้าย: Vue Router
หรือ
ขั้นตอนที่ 2: สร้าง ไฟล์ในไดเรกทอรีรากของโปรเจ็กต์ ในไฟล์นี้ เราจะประกาศและกำหนดค่า s ของแอปพลิเคชัน router.js
route
ขั้นตอนที่ 3: ใน main.js
ไฟล์ ให้นำเข้า และลิงก์กับ แอปพลิเคชัน: Vue Router Vue
ขั้นตอนที่ 4: ใน ไฟล์ คุณสามารถประกาศ s โดยใช้ คอมโพเนนต์ เช่น,, และคุณสมบัติอื่นๆ router.js
route Vue Router path
component
ตัวอย่างเช่น คุณสามารถประกาศ route สำหรับหน้าแรกและ route สำหรับหน้าเกี่ยวกับดังนี้:
ขั้นตอนที่ 5: ใน Vue คอมโพเนนต์ คุณสามารถใช้คอมโพเนนต์ต่างๆ เช่น สร้างลิงก์ไปยัง s อื่นๆ และ แสดงเนื้อหาของไฟล์. <router-link>
route <router-view>
route
ตัวอย่างเช่น ในเทมเพลตของคอมโพเนนต์หน้าแรก คุณสามารถใช้ เพื่อสร้างลิงก์ไปยังหน้าเกี่ยวกับ: <router-link>
ในเทมเพลตของคอมโพเนนต์ App คุณสามารถใช้ เพื่อแสดงเนื้อหาของปัจจุบัน: <router-view>
route
ด้วยขั้นตอนเหล่านี้ คุณได้ตั้งค่าและใช้ เพื่อจัดการ และ ใน แอปพลิเคชัน .js ของคุณ Vue Router routing navigation Vue