router-view का उपयोग
router-view वह placeholder है जहाँ current route के लिए component render होता है।
In this page:
Syntax
<nav>
<router-link to="/path">link text</router-link>
</nav>
<router-view></router-view>router-view
router-view को वहाँ रखें जहाँ page content दिखना चाहिए, typically एक shared navigation के नीचे। Named views एक route को एक साथ कई components render करने देते हैं। pages animate या cache करने के लिए v-slot API के जरिए transition और keep-alive से combine करें।
Note:
nesting के हर level के लिए एक router-view: nested routes को एक nested router-view चाहिए।
उदाहरण: router-view
<!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">
<h1>My Site</h1>
<router-view></router-view>
<router-view name="sidebar"></router-view>
</div>
<script>
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [{
path: "/",
components: { default: { template: "<main>Main content</main>" }, sidebar: { template: "<aside>Sidebar</aside>" } },
}],
});
Vue.createApp({}).use(router).mount("#app");
router.isReady().then(() => console.log(document.querySelector("#app").textContent.replace(/\s+/g, " ").trim()));
</script>
</body>
</html>
<!-- Output:
Rendered: My SiteMain contentSidebar
console: My SiteMain contentSidebar
-->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. #}
आम गलतियां
- router-view भूल जाना ताकि कुछ render न हो
- nested routes के लिए एक router-view इस्तेमाल करना
- not-found route handle न करना
चैप्टर सारांश
- router-view matched component दिखाता है
- Named views कई दिखाते हैं
- Nested routes को nested views चाहिए
- transition और keep-alive के साथ काम करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: