المسارات المتداخلة والديناميكية

ما بعد المسارات الثابتة

مقاطع المسارات الديناميكية

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 }
    ]
  }
]

router-view متداخل

<!-- 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 } })
}

طرق تنقل أخرى

تحقق سريع

مراجعة: المسارات المتداخلة والديناميكية