Vue Router والحالة المملوكة للمسار

import { createRouter, createMemoryHistory } from "vue-router"
import NoteList from "./NoteList.vue"
import NoteDetail from "./NoteDetail.vue"

export const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: "/notes", name: "notes", component: NoteList },
    { path: "/notes/:id", name: "note", component: NoteDetail }
  ]
})

يثبت التطبيق الموجه ويوفر المكوّنين ويدفع موقعاً أولياً بإعداده المضبوط. هو جزء إعداد لا تطبيق عامل ولا ينفذ تنقلاً أو طلباً أو خادماً.

<script setup>
import { computed } from "vue"
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()
const currentId = computed(() => String(route.params.id ?? ""))
function openExample() {
  return router.push({ name: "note", params: { id: "n2" } })
}
</script>

<template>
  <p>Current note: {{ currentId }}</p>
  <button type="button" @click="openExample">Open example note</button>
</template>

يتطلب تثبيت الموجه المتوافق والمسار المسمى السابق. يتبع المعرّف المحسوب المعامل، ولم ينفذ التنقل أو تاريخ المتصفح لهذا المثال.