คำแนะนำเกี่ยวกับ Vue Router

บทนำ

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

การกำหนดเส้นทางเป็นกระบวนการที่ผู้ใช้ถูกนำทางไปยังหน้าต่างๆ บนเว็บไซต์ Vue.js เป็นเฟรมเวิร์ก JavaScript ที่ใช้สร้างแอปหน้าเดียว ซึ่งหมายความว่าแอปพลิเคชันนี้โหลดเพียงครั้งเดียวจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์ และเบราว์เซอร์ไม่จำเป็นต้องโหลดซ้ำเมื่อกำหนดเส้นทาง แทนที่จะร้องขอหน้าเหล่านี้และโหลด

ในคู่มือนี้ เราจะเรียนรู้วิธีกำหนดเส้นทางด้วย Vue.js และเจาะลึกเกี่ยวกับการกำหนดเส้นทางประเภทต่างๆ ที่สามารถทำได้และวิธีที่ทำได้

เริ่มต้นใช้งาน

การกำหนดเส้นทางใน Vue.js เสร็จสิ้นด้วย Vue เราเตอร์ซึ่งทำงานควบคู่กับไลบรารี Vue หลักเพื่อให้เราสามารถตั้งค่าระบบการกำหนดเส้นทาง เราอยากจะใช้ vue-router ในสองสถานการณ์ในโครงการของเรา เราต้องการใช้เราเตอร์ในโครงการที่มีอยู่หรือเพิ่มในขณะที่สร้างโครงการใหม่

ตั้งค่า Vue Router ในโครงการที่มีอยู่

การบูรณาการ vue-router ในโครงการที่มีอยู่อาจเป็นเรื่องทางเทคนิค และเราจะพูดถึงรายละเอียดเหล่านี้ในตอนนี้ ขั้นตอนแรกคือการติดตั้งแพ็คเกจเราเตอร์ vue โดยใช้คำสั่งต่อไปนี้:

! npm install vue-router@4

เมื่อติดตั้งแล้ว ให้ไปที่ src โฟลเดอร์และสร้างโฟลเดอร์ชื่อ routerตามด้วยไฟล์ชื่อ index.js ใน router โฟลเดอร์ซึ่งจะทำหน้าที่เป็นไฟล์กำหนดค่าเราเตอร์ของเรา ของเรา src ไดเรกทอรีจะมีลักษณะดังนี้:

ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร index.js ให้มั่นใจว่าเราวางรหัสด้านล่างซึ่งเป็นรหัสการกำหนดค่าเราเตอร์:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

เรามี routes อาร์เรย์ที่มีอ็อบเจ็กต์เดียว ซึ่งอาจมีหลายอ็อบเจ็กต์ โดยที่แต่ละอ็อบเจ็กต์แสดงถึงเส้นทางเดียว ในขณะนี้ เราสร้างเฉพาะส่วนที่จะเปลี่ยนเส้นทางไปยังองค์ประกอบหน้าแรก

แต่ละรายการเหล่านี้ routes วัตถุมักจะประกอบด้วย pathซึ่งเป็นเส้นทาง URL ที่สัมพันธ์กับรูทของเว็บไซต์ the nameซึ่งทำหน้าที่เป็นตัวระบุและ componentซึ่งเรานำเข้าที่ด้านบนของหน้า

นอกเหนือจากอาร์เรย์เส้นทางแล้ว เราตั้งค่าอินสแตนซ์ของเราเตอร์ที่ด้านล่างโดยสร้าง a createRouter() ฟังก์ชั่นและการส่งผ่านใน history ค่าคีย์และ routes อาร์เรย์แล้วส่งออก router ตัวอย่างสำหรับใช้ภายในแอปพลิเคชันของเรา

หากต้องการใช้การกำหนดค่าเราเตอร์นี้ภายในแอปพลิเคชันของเรา ให้เปิด main.js แฟ้มใน src โฟลเดอร์ import router from "./router"แล้วเพิ่ม .use(router) ระหว่าง createApp(App) และ .mount('#app') ตามที่อยู่ด้านล่าง:

import router from './router' createApp(App).use(router).mount('#app')

vue-router ได้รับการกำหนดค่าทั่วโลกภายในแอปพลิเคชันของเรา และขั้นตอนต่อไปคือการใช้ภายในแอปพลิเคชันของเรา ทำได้โดยง่ายโดยการรวม <router-view /> ภายใน App.js แท็กเทมเพลต ซึ่งแสดงเฉพาะเส้นทางที่ตรงกัน:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

การตั้งค่าเส้นทางใน Vue.js

เส้นทางมักจะถูกสร้างขึ้นใน router/index.js อาร์เรย์เส้นทางของไฟล์ และเส้นทางเหล่านี้เชื่อมต่อกับส่วนประกอบ แนวทางปฏิบัติที่ดีในการสร้างโฟลเดอร์มุมมองที่จะจัดเก็บการดูหน้าเว็บทั้งหมด ตัวอย่างเช่น:

ณ จุดนี้เรารู้วิธีตั้งค่าเส้นทางด้วยตนเองแล้ว

ติดตั้ง Vue Router ด้วย Vue CLI

หากเรากำลังจะสร้างโครงการใหม่และเชื่อว่าเราจะใช้ประโยชน์จาก vue-routerจะทำได้ง่ายขึ้นในขณะที่สร้างโครงการ

สิ่งที่เราต้องทำคือใช้ Vue CLI เพื่อติดตั้ง . เวอร์ชันล่าสุด vue-router ในขณะที่เลือกคุณสมบัติด้วยตนเองในกระบวนการสร้างโครงการของเรา:

อ่านและเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างโครงการ Vue.js ผ่านทาง .ของเรา คำแนะนำเกี่ยวกับ Vue CLI!

เส้นทางการโหลดขี้เกียจด้วย Vue Router

เมื่อแอปพลิเคชันของเรามีขนาดใหญ่ขึ้น ขนาดของบันเดิลก็เพิ่มขึ้น ทำให้ไซต์ของเราใช้เวลาในการโหลดนานขึ้น เราสามารถใช้ vue-router เพื่อใช้การโหลดแบบสันหลังยาวเพื่อหลีกเลี่ยงการโหลดบางเส้นทางจนกว่าผู้ใช้จะร้องขอโดยเฉพาะ

โดยทั่วไปจะทำได้สำเร็จในไฟล์การกำหนดค่าเราเตอร์โดยการลบ import คำสั่งที่ด้านบนและแทนที่ด้วยคำสั่งการนำเข้าแบบไดนามิกในตัวเลือกส่วนประกอบของเส้นทางของเรา:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

การนำทางระหว่างเส้นทางด้วย

จนถึงตอนนี้ เราสามารถสร้างเส้นทางได้ แต่เราจะนำทางภายในแอปพลิเคชันของเราได้อย่างไร เราใช้ <router-link> แท็กแทน <a> องค์ประกอบใน HTML เพื่อจัดการการกำหนดเส้นทาง

ตัวอย่างเช่น หากเราต้องการสร้างแถบนำทางที่ด้านบนของแอปพลิเคชันของเรา เราสามารถทำได้ใน App.js ไฟล์ด้านบน <router-view/> แท็กเพื่อให้แสดงในทุกเส้นทาง:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

ลิงค์เราเตอร์ยอมรับ to='path' แอตทริบิวต์ที่นำผู้ใช้ไปยังเส้นทางของส่วนประกอบตามที่ได้ตั้งค่าไว้เมื่อกำหนดค่าเส้นทาง ทำงานเหมือน href='path``' แอตทริบิวต์ใน HTML

การใช้เส้นทางที่มีชื่อ

การใช้เส้นทางที่มีชื่อทำให้เราผ่านใน name กุญแจที่สามารถเข้าถึง name คุณสมบัติที่เราตั้งค่าไว้ขณะกำหนดค่าเส้นทางแทนการใช้เส้นทางโดยผูกข้อมูลด้วยวิธีนี้:

<router-link :to="{ name: 'About' }">About</router-link>

ข้อดีประการหนึ่งของการใช้วิธีนี้คือในกรณีที่เราตัดสินใจเปลี่ยนเส้นทางเส้นทางสำหรับแอปพลิเคชันขนาดใหญ่ของเรา เราไม่จำเป็นต้องเริ่มเปลี่ยนเส้นทางลิงก์ทั้งหมดซึ่งอาจยุ่งยาก

การกำหนดเส้นทางแบบไดนามิก

สถานการณ์อาจเกิดขึ้นซึ่งจำเป็นต้องใช้การกำหนดเส้นทางแบบไดนามิกเพื่อหลีกเลี่ยงการซ้ำซ้อนของหน้าโดยไม่จำเป็น ตัวอย่างเช่น สมมติว่าเรามีรายการผลไม้และเราต้องการให้ผู้ใช้สามารถคลิกที่ผลไม้ใดผลไม้หนึ่งและเฉพาะรายละเอียดเกี่ยวกับผลไม้นั้นเท่านั้นที่จะแสดงบนหน้ารายละเอียดผลไม้ ในกรณีนี้ เราใช้การกำหนดเส้นทางแบบไดนามิก

เรามีสองหน้า หน้าหนึ่งสำหรับแสดงผลไม้ในรายการ และหน้าหนึ่งสำหรับแสดงรายละเอียดของผลไม้แต่ละชนิด ซึ่งเป็นหน้า "พิมพ์เขียว" ที่จะใส่รายละเอียดของผลไม้ เราจะสร้างเพจในโฟลเดอร์ Vue แล้วเพิ่มเส้นทางไปที่ routes อาร์เรย์:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

เราจะสังเกตว่าสำหรับ FruitDetails หน้า เราได้เพิ่มไดนามิก id ทรัพย์สินจึงได้รับ id พารามิเตอร์และใช้เพื่อสืบค้นข้อมูลเฉพาะที่แสดงบนหน้านั้นโดยใช้ $route.params ในเทมเพลตของเรา ซึ่งทำให้เส้นทางเป็นไดนามิก

ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร FruitsPageสมมติว่าเรามีผลไม้มากมายที่เราวนซ้ำในแอปพลิเคชันของเรา เราสามารถห่อผลไม้แต่ละชิ้นด้วยลิงก์ข้าง params ด้วยวิธีนี้:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

ณ จุดนี้เมื่อผู้ใช้คลิกแต่ละผลไม้ มันจะนำพวกเขาไปที่ FruitDetails หน้าที่เราสามารถเข้าถึง id พารามิเตอร์และใช้เพื่อระบุรายละเอียดของผลไม้ที่ควรแสดงใน FruitDetails หน้า.

เข้าถึงพารามิเตอร์เส้นทาง

จนถึงตอนนี้ เราได้เห็นวิธีการส่งต่อพารามิเตอร์ไปยังหน้าใดหน้าหนึ่งแบบไดนามิก ตอนนี้เรามาดูกันว่าเราสามารถเข้าถึงพารามิเตอร์นั้นในของเราได้อย่างไร FruitDetails หน้าหนังสือ. มีสองวิธีที่เราสามารถเข้าถึงพารามิเตอร์ใน Vue – via $route.params หรือใช้อุปกรณ์ประกอบฉาก:

การใช้ $เส้นทาง.params

พารามิเตอร์สามารถเข้าถึงได้โดยตรงผ่านทาง $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

หรือเราสามารถเข้าถึงได้ภายในของเรา data() วิธีการใช้ this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

การใช้ Vue Props

อีกวิธีง่ายๆ ในการเข้าถึงข้อมูลแบบไดนามิกผ่านเส้นทางคือการใช้อุปกรณ์ประกอบฉาก เราต้องตั้งไว้ก่อน props ไปยัง true ในวัตถุการกำหนดค่าเส้นทาง:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

ด้วยวิธีนี้ สิ่งที่เราต้องทำต่อไปคือการเพิ่ม props ตัวเลือก script แท็กแล้วใช้ประโยชน์จากอุปกรณ์ประกอบฉากภายในของเรา template แท็ก:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

ข้อผิดพลาด 404 – ไม่พบเส้นทาง

ในกรณีที่ผู้ใช้นำทางไปยังเส้นทางที่ไม่มีอยู่ Vue จะโหลดหน้า แต่ไม่มีส่วนประกอบใด ๆ ทำให้เกิดหน้าว่าง ในกรณีนี้ สิ่งที่ดีที่สุดที่ควรทำคือแสดงหน้า 404 ที่มีปุ่มนำทางไปยังหน้าแรกหรือที่ใดก็ตามที่เราเชื่อว่าพวกเขาต้องการไป

ซึ่งจัดการได้ง่ายโดยการสร้างส่วนประกอบสำหรับหน้า 404 ของเรา จากนั้นเพิ่มเส้นทาง 404 ไปยังอาร์เรย์เส้นทางของไฟล์การกำหนดค่าเราเตอร์ แต่คราวนี้ เราจะใช้นิพจน์ทั่วไปเพื่อตรวจจับเส้นทางทั้งหมดที่ยังไม่ได้ประกาศไว้ก่อนหน้านี้:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

พื้นที่ :catchAll เป็นส่วนไดนามิกที่ได้รับนิพจน์ปกติของ (.*) ซึ่ง Vue Router ใช้เพื่อตรวจสอบว่าเส้นทางที่ผู้ใช้นำทางไปนั้นถูกกำหนดไว้ในไฟล์การกำหนดค่าของเราเตอร์ของเราหรือไม่ หากไม่มีเส้นทางดังกล่าว ผู้ใช้จะถูกนำไปที่ส่วนประกอบ ซึ่งในกรณีของเราคือ ErrorPage ส่วนประกอบ:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

การเปลี่ยนเส้นทาง

ในสถานการณ์ที่เราต้องการให้ผู้ใช้ถูกเปลี่ยนเส้นทางเมื่อไปที่เส้นทางใดเส้นทางหนึ่ง ตัวอย่างเช่น หากเรามีเส้นทางเดิมที่เราไม่ได้ใช้แล้ว เราต้องการให้ผู้ใช้ถูกเปลี่ยนเส้นทางไปยังเส้นทางใหม่เมื่อพวกเขาเยี่ยมชมเส้นทางนั้น ทำได้โดยง่ายโดยการเพิ่มวัตถุใหม่ให้กับอาร์เรย์การกำหนดค่าเส้นทางของเราด้วย a redirect สนาม:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

โค้ดด้านบนทั้งหมดมีว่าหากผู้ใช้เข้าชม path /all-fruitsมันจะเปลี่ยนเส้นทางพวกเขาไปที่ /fruits เส้นทาง

การนำทางแบบเป็นโปรแกรม

จนถึงตอนนี้ เราได้เรียนรู้มากมายเกี่ยวกับการกำหนดเส้นทางแล้ว แต่มีอีกสิ่งหนึ่งที่คุณอยากรู้: วิธีดำเนินการการนำทางแบบเป็นโปรแกรม เรากำหนดการนำทางแบบเป็นโปรแกรมเป็นสถานการณ์ที่ผู้ใช้ถูกเปลี่ยนเส้นทาง/กำหนดทิศทางตามการดำเนินการเฉพาะที่เกิดขึ้นบนเส้นทาง เช่น การเข้าสู่ระบบหรือการดำเนินการสมัครใช้งาน หรือโดยการคลิกปุ่มเฉพาะ เช่น ปุ่ม "ย้อนกลับ"

ประวัติเราเตอร์

เราสามารถใช้ประวัติเบราว์เซอร์เพื่อย้อนกลับหรือไปข้างหน้าได้อย่างง่ายดาย ขึ้นอยู่กับความชอบของเรา ถ้าคุณจำได้ เรามี createRouter() ฟังก์ชันในไฟล์กำหนดค่าเราเตอร์ที่เราตั้งค่า a history ค่าช่วยให้เราเตอร์ Vue ติดตามประวัติเราเตอร์ของเราขณะที่เรากำหนดเส้นทางผ่านเว็บแอปพลิเคชัน

ซึ่งช่วยให้เราสำรวจประวัติของเบราว์เซอร์ได้ โดยอิงตามเงื่อนไข เช่น การคลิกปุ่ม:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

เรายังสามารถตัดสินใจเดินหน้าโดยใช้ปุ่ม 1 แทน -1 และสมมุติว่าเราต้องการขยับ 2 ก้าวก็ใช้ได้เช่นกัน 2 or -2.

ผลัก

push() โดยทั่วไปจะใช้หลังจากเกิดการกระทำและเพิ่มรายการใหม่ลงในสแต็กประวัติ ตัวอย่างเช่น หากผู้ใช้ลงชื่อเข้าใช้ได้สำเร็จ เราต้องการที่จะนำทางไปยังหน้าแดชบอร์ดโดยทางโปรแกรม ทำได้โดยการรวมวิธีการพุชไว้ข้างชื่อเส้นทาง:

this.$router.push({ name: 'Dashboard' });

สรุป

การกำหนดเส้นทางเป็นหนึ่งในฟังก์ชันหลักของ Vue เว้นแต่คุณกำลังสร้าง แอปพลิเคชันหน้าเดียว (SPA)คุณจะต้องเชื่อมโยงหลายหน้ากับหน้า Landing Page เพื่อให้ผู้ใช้นำทางผ่านหน้าเหล่านั้นได้

ในคู่มือนี้ เรามาดูกันว่าการกำหนดเส้นทางคืออะไร คุณจะติดตั้ง .ได้อย่างไร vue-router ในโปรเจ็กต์ใหม่และที่มีอยู่ วิธีการดำเนินการโหลดแบบ Lazy Loading, นำทางระหว่างเส้นทาง, ดำเนินการกำหนดเส้นทางแบบไดนามิก, เข้าถึงพารามิเตอร์เส้นทางและการนำทางแบบเป็นโปรแกรม

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://stackabuse.com/guide-to-vue-router/