Utilizing vue.js for my administration app, I aim to create a highly modular UI architecture. Therefore, I have structured and enclosed the Header, Body, Sidebar, and Main in single file components as illustrated below.
Tree
App
- Header
- dynamic content
- Body
- Sidebar
- dynamic content
- Main
- dynamic content
Graphical
┌──────────────────────────────────────────────────────────┐
│ HEADER SOME DYNAMIC CONTENT │
├──────────────────────────────────────────────────────────┤
│ BODY │
│┌──────────┬─────────────────────────────────────────────┐│
││ SIDEBAR │ MAIN ││
││ │ ││
││ SOME │ SOME DYNAMIC CONTENT ││
││ DYNAMIC │ ││
││ CONTENT │ ││
││ │ ││
└──────────┴─────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────┘
Each of these components now includes its own router view to display dynamic content based on the current route. How can this be achieved with only one router-view available in vue.js? Is it possible to access these dynamic components collectively through the routed view component without replacing the original content, similar to php Smarty, like the following example?
aboutus.vue
<template>
<div>
<header>
<header-content>
About us - Header
</header-content>
</header>
<sidebar>
<sidebar-content>
About us - Sidebar
</sidebar-content>
</sidebar>
<main>
<main-content>
About us - Main
</main-content>
</main>
</div>
</template>
<script>
/* ... */
</script>
However, due to the nested architecture, achieving this seems impractical. I am struggling to navigate the routing architecture in vue.js with nested components.