Route Params का उपयोग
एक path में dynamic segments, :id जैसे, params की तरह capture होते हैं जिन्हें आपका component पढ़ सकता है।
In this page:
Syntax
{ path: '/resource/:id', component: ComponentName }
<p>{{ $route.params.id }}</p>Route Params
/user/:id जैसा एक route define करें और value को $route.params.id या useRoute().params.id से पढ़ें।
Params strings हैं। जब सिर्फ param बदलता है, same component instance reuse होता है, इसलिए data reload करने के लिए param watch करें।
Props: true params को props की तरह pass करता है।
Note:
params को component props की तरह receive करने के लिए route पर props: true set करें।
उदाहरण: Route params
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
</head>
<body>
<div id="app"><router-view></router-view></div>
<script>
const User = { template: "<p>User #{{ $route.params.id }} (type {{ typeof $route.params.id }})</p>" };
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [{ path: "/user/:id", component: User }],
});
Vue.createApp({}).use(router).mount("#app");
router.push("/user/42").then(async () => {
await Vue.nextTick();
console.log(document.querySelector("p").textContent);
});
</script>
</body>
</html>
<!-- Output:
Rendered: User #42 (type string)
console: User #42 (type string)
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह उम्मीद करना कि params numbers होंगे
- सिर्फ param बदलने पर react न करना
- navigation complete होने से पहले params पढ़ना
चैप्टर सारांश
- :id एक dynamic segment define करता है
- $route.params से पढ़ें
- Params strings हैं
- component reuse होने पर params watch करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: