เส้นทางซ้อนและเส้นทางแบบไดนามิก

เหนือกว่าเส้นทางแบบคงที่

ส่วนของเส้นทางแบบไดนามิก

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

การเข้าถึง route.params

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

การตอบสนองต่อการเปลี่ยนแปลงพารามิเตอร์

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

ส่วนของเส้นทางแบบไดนามิกหลายส่วน

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

เส้นทางที่ซ้อนกัน

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

ส่วนแสดงผลของเราเตอร์ที่ซ้อนกัน

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

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

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

การเชื่อมโยงด้วยชื่อ

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

การนำทางโดยใช้คำสั่ง

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

เมธอดการนำทางอื่น ๆ

ตรวจสอบความเข้าใจ

ทบทวน: เส้นทางที่ซ้อนกันและเส้นทางแบบไดนามิก