VueJS - การกำหนดเส้นทาง
VueJS ไม่มีคุณสมบัติเราเตอร์ในตัว เราต้องทำตามขั้นตอนเพิ่มเติมเพื่อติดตั้ง
ดาวน์โหลดโดยตรงจาก CDN
vue-router เวอร์ชันล่าสุดมีจำหน่ายที่ https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com มีลิงค์ cdn ที่ใช้ npm ลิงก์ด้านบนจะอัปเดตเป็นเวอร์ชันล่าสุดเสมอ เราสามารถดาวน์โหลดและโฮสต์และใช้กับสคริปต์แท็กร่วมกับ vue.js ได้ดังนี้ -
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>ใช้ NPM
รันคำสั่งต่อไปนี้เพื่อติดตั้ง vue-router
npm install vue-routerใช้ GitHub
เราสามารถโคลนที่เก็บจาก GitHub ได้ดังนี้ -
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildเริ่มจากตัวอย่างง่ายๆโดยใช้ vue-router.js
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>Output
ในการเริ่มต้นด้วยการกำหนดเส้นทางเราต้องเพิ่มไฟล์ vue-router.js ใช้รหัสจากhttps://unpkg.com/vue-router/dist/vue-router.js และบันทึกลงในไฟล์ vue-router.js
สคริปต์จะถูกเพิ่มหลังจาก vue.js ดังนี้ -
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>ในส่วนเนื้อหามีลิงค์เราเตอร์ที่กำหนดไว้ดังนี้ -
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p><router-link>เป็นส่วนประกอบที่ใช้เพื่อนำทางไปยังเนื้อหา HTML ที่จะแสดงต่อผู้ใช้ คุณสมบัติ to คือปลายทางกล่าวคือไฟล์ต้นทางที่เนื้อหาที่จะแสดงจะถูกเลือก
ในโค้ดด้านบนเราได้สร้างลิงก์เราเตอร์สองลิงก์
ดูที่ส่วนสคริปต์ที่เริ่มต้นเราเตอร์ มีการสร้างค่าคงที่สองค่าดังนี้ -
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }มีเทมเพลตซึ่งจะต้องแสดงเมื่อคลิกลิงก์เราเตอร์
ถัดไปคือเส้นทาง const ซึ่งกำหนดเส้นทางที่จะแสดงใน URL
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];เส้นทางกำหนดเส้นทางและส่วนประกอบ เส้นทางคือ/route1 จะแสดงใน URL เมื่อผู้ใช้คลิกที่ลิงค์เราเตอร์
คอมโพเนนต์ใช้ชื่อเทมเพลตที่จะแสดง เส้นทางจากเส้นทางต้องตรงกับลิงก์เราเตอร์ไปยังคุณสมบัติ
ตัวอย่างเช่น <router-link to = ”path here”> </router-link>
จากนั้นอินสแตนซ์จะถูกสร้างขึ้นสำหรับ VueRouter โดยใช้โค้ดต่อไปนี้
const router = new VueRouter({
routes // short for `routes: routes`
});ตัวสร้าง VueRouter ใช้เส้นทางเป็นพารามิเตอร์ อ็อบเจ็กต์เราเตอร์ถูกกำหนดให้กับอินสแตนซ์ vue หลักโดยใช้โค้ดต่อไปนี้
var vm = new Vue({
el: '#app',
router
});ดำเนินการตามตัวอย่างและดูการแสดงผลในเบราว์เซอร์ ในการตรวจสอบและตรวจสอบลิงค์เราเตอร์เราจะพบว่ามันเพิ่มคลาสให้กับองค์ประกอบที่ใช้งานอยู่ดังที่แสดงในภาพหน้าจอต่อไปนี้
คลาสที่เพิ่มเข้ามาคือ class = “router-link-exact-active router-link-active”. ลิงก์ที่ใช้งานได้รับคลาสดังที่แสดงในภาพหน้าจอด้านบน สิ่งที่ควรสังเกตอีกประการหนึ่งคือ <router-link> แสดงเป็นแท็ก
อุปกรณ์ประกอบฉากสำหรับเราเตอร์ลิงค์
ให้เราดูคุณสมบัติเพิ่มเติมที่จะส่งไปยัง <router-link>
ถึง
นี่คือเส้นทางปลายทางที่กำหนดให้กับ <router-link> เมื่อคลิกค่าของ to จะถูกส่งไปยัง router.push () ภายใน ค่าต้องเป็นสตริงหรือวัตถุตำแหน่ง เมื่อใช้วัตถุเราจำเป็นต้องผูกมันดังที่แสดงในเช่น 2
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.ต่อไปนี้เป็นผลลัพธ์ของเช่น 3
ในเส้นทาง URL name = Tery เป็นส่วนหนึ่งของสตริงแบบสอบถาม เช่น: http: //localhost/vueexamples/vue_router.html#/route1? name = Tery
แทนที่
การเพิ่มแทนที่ลิงก์เราเตอร์จะเรียกไฟล์ router.replace() แทน router.push(). ด้วยการแทนที่ประวัติการนำทางจะไม่ถูกเก็บไว้
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>ผนวก
การเพิ่มผนวกเข้ากับ <router-link> <router-link> จะทำให้พา ธ สัมพันธ์กัน
หากเราต้องการไปจากลิงค์เราเตอร์ที่มี path / route1 ไปยัง router link path / route2 มันจะแสดง path ในเบราว์เซอร์เป็น / route1 / route2
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>แท็ก
ในปัจจุบัน <router-link> แสดงผลเป็นแท็ก ในกรณีที่เราต้องการแสดงผลเป็นแท็กอื่นเราจำเป็นต้องระบุให้เหมือนกันโดยใช้ tag =” tagname”;
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>เราได้ระบุแท็กเป็นช่วงและนี่คือสิ่งที่แสดงในเบราว์เซอร์
แท็กที่แสดงตอนนี้เป็นแท็กช่วง เราจะยังคงเห็นการคลิกเกิดขึ้นเมื่อเราคลิกที่ลิงค์เราเตอร์สำหรับการนำทาง
แอคทีฟคลาส
ตามค่าเริ่มต้นคลาสที่ใช้งานอยู่ที่เพิ่มเมื่อลิงก์เราเตอร์ทำงานอยู่คือ router-link-active เราสามารถเขียนทับคลาสได้โดยตั้งค่าให้เหมือนกับที่แสดงในโค้ดต่อไปนี้
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>คลาสที่ใช้คือ active_class =” _active” นี่คือผลลัพธ์ที่แสดงในเบราว์เซอร์
แน่นอนใช้งานคลาส
คลาสที่กำหนดค่าเริ่มต้นที่ใช้คือ router-link-exact-active เราสามารถเขียนทับได้โดยใช้ exact-active-class
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>นี่คือสิ่งที่แสดงในเบราว์เซอร์
เหตุการณ์
ในปัจจุบันเหตุการณ์เริ่มต้นสำหรับเราเตอร์ลิงค์คือเหตุการณ์คลิก เราสามารถเปลี่ยนสิ่งเดียวกันโดยใช้คุณสมบัติเหตุการณ์
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>ตอนนี้เมื่อเราวางเมาส์เหนือลิงค์เราเตอร์มันจะไปตามที่แสดงในเบราว์เซอร์ต่อไปนี้ วางเมาส์บนลิงค์เราเตอร์ 1 แล้วเราจะเห็นการนำทางเปลี่ยนไป
