vue 7
จัดการเส้นทาง ด้วย this.$router
ตอนนี้เราจะเข้าไปดู user แต่ละคน จะทําปุ่มดู user ก่อนเลยครับ โดยเพิ่ม button หนึ่งตัว
ทําการสร้าง method ใหั Vue Component
โดย method นี้จะเป็นการ เรียก Vue Component ที่ชื่อว่า
components/Users/ShowUser.vue มา Render
แทน components/Users/Index.vue
เพิ่ม code เข้าไปใน tag script ใน
components/Users/Index.vue
code ชุดนี้ เมื่อเราเรียกใช้เราจะส่ง path ที่เราต้องการให้วิ่งไป ผ่านตัวแปร route
โดย this.$router.push(route)
จะทําการเรียกใช้ได้เลย เพราะติดตั้งมากจาก vue-cli ให้เรียบร้อยแล้วครับ
ซึ่งจริง ๆ แล้ว v-on:click=”navigateTo(‘/user’)” ก็คือ function onclick เพียงแต่ว่าแต่ละภาษาก็จะมี syntax ของเค้าเราก็ว่ากันตามเค้าไป เอาเป็นว่าเราเข้าใจใช้งานได้คือจบครับ
กดปุ่ม ดูข้อมูลผู้ใช้จะทําการ Route ไปตามที่กําหนดไว้โดยคําสั่ง
this.$router.push(route)ซึ่ง path ที่เราส่งไป เพื่อทําการ routing ก็คือ /user ซึ่งก็คือ url
http://localhost:8080/#/userนั่นเองผลการกดปุ่มก็ไม่มีอะไรมากจะ route ไป path ที่ส่ง
แต่ความจริงแล้วเวลาที่กดดูเข้าข้อมูล user ของแต่ละคนเราต้องทําการดึงข้อมูล user คนนั้นออกมา โดยเรามักจะกําหนดจาก id
ดังนั้นเวลาที่เรา กดปุ่มดูข้อมูล ผู้ใช้ เราต้องทําการส่ง id พ่วงมาด้วยเราเริ่มเช็คกันตั้งแต่ router/index.js เลย
ทําการเปิด src/router/index.js มองหา code ชุดนี้ครับ
จากนั้นเปลี่ยนเป็น
ที่เราจะทําการส่ง userId พ่วงไปด้วย แน่นอนเมื่อทําการส่งไปก็ต้องมีการรับเราไปเขียน code สําหรับ รับค่า userId กัน
ที่เราวางแผนไว้ คือ
components/Users/Index.vue → (userId) → components/Users/ShowUser.vue
ดังนั้น ตัวที่รับงานที่เราส่งไปจัดการต่อ คือ
components/Users/ShowUser.vue นั่นเอง
เปิด ShowUser.vue ทําการแก้ไข code
จาก code เหมือนเดิมครับเราเริ่มทํางานที่ created () ก่อนเหมือนเดิม
โดยเรามีตัว แปร หรือ data () ของเราคือ userId กําหนดค่าเริ่มต้นไว้ userId = 0
this.$route.params.userId
มาเก็บไว้ที่ userId แล้วไอ้เจ้านี่มายังไงมาตอนเราติดตั้ง vue-cli เลยติดตั้ง router มาให้เราเรียกใช้งาน this.$route ได้
จําไว้อย่างจะ
- สั่งงานให้วิ่งไปไหนทําอะไร จะเป็น this.$router (เร้าเตอร) แต่
- ถ้าอ่านค่า ่านมันเป็น this.$route (รูท) นะครับ
- router != route นะคับ จําไว้ ๆ ครับ
http://localhost:8080/#/user/3จาก url ที่จะไปเปิดบน web browser ของ จะเห็นได้ว่าส่ง /3 แนบไปด้วย ซึ่งคือ userId ของผมนั่นเอง โดย web brwoser
เมื่อทําการกดปุ่ม browser ก็จะวิ่งไปตามที่กําหนดไว้ พร้อมส่ง userId แนบไป ด้วยนั่นเอง
ทําการแสดงข้อมูลผู้ใช้แต่ละคน
เมื่อเราทําการรับส่ง userId ได้แล้วในตอนนี้จะทําการ get user by id เพื่อดึง ข้อมูลผู้ใช้มาแสดง
ทําการเปิด src/components/Users/ShowUser.vue
แล้วทําการแก้ code เป็นดังนี้ครับ
เริ่มต้นจาก created () แล้วเหมือนเดิม แต่จากที่เราใช้การ load ข้อมูลจาก api server ที่เราทําไว้เราต้องทําการใส่ await และ asynce เหมือนเดิม
จากนั้นทําการแสดงผลผ่าน template ที่เราทําไว้นั่นเองในกรณีนี้ถ้าเรา error จากการทํางานต่างๆ เราจะไม่รู้เลยเราจะทําการดักมันไว้ ก่อนด้วย
try/catch ในการณีที่เราโหลดข้อมูลจาก api server แลวทํางาน ผิดพลาดครับ จะได้แจ้ง error ให้ทราบ
อย่าลืมตามไปแก้ที่ src/components/Users/Index.vue
จะได้รู้เวลามันเกิด error ตอนโหลดข้อมูล
