Nested Routes का उपयोग
Nested routes child pages को एक parent layout के अंदर render करते हैं, /account/settings जैसे URLs match करते हुए।
In this page:
Syntax
{
path: '/parent',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent }
]
}
<!-- ParentComponent template -->
<router-view></router-view>Nested Routes
एक route में एक children array add करें। Parent component का अपना router-view है जहाँ matched child appear होता है। बिना leading slash वाले Child paths parent के relative हैं। एक empty child path default view की तरह act करता है।
Note:
/ से शुरू होने वाला एक child path absolute माना जाता है, इसलिए इसे छोड़ दें।
उदाहरण: Nested routes
<!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 Account = { template: "<section><h3>Account</h3><router-view></router-view></section>" };
const Profile = { template: "<p>Profile tab</p>" };
const Settings = { template: "<p>Settings tab</p>" };
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [{ path: "/account", component: Account, children: [
{ path: "", component: Profile },
{ path: "settings", component: Settings },
] }],
});
Vue.createApp({}).use(router).mount("#app");
router.push("/account/settings").then(async () => {
await Vue.nextTick();
console.log(document.querySelector("#app").textContent.replace(/\s+/g, " ").trim());
});
</script>
</body>
</html>
<!-- Output:
Rendered: AccountSettings tab
console: AccountSettings tab
-->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. #}
आम गलतियां
- Child paths पर एक leading slash इस्तेमाल करना
- nested router-view भूल जाना
- यह उम्मीद करना कि parent गायब हो जाएगा
चैप्टर सारांश
- children routes nest करते हैं
- Parent के पास एक router-view है
- Child paths relative हैं
- एक empty child default है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: