My current setup looks like this:
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
This serves as my default page, and I want it to load two different layouts for admin and public. Everything works well except for a small issue with the public layout. I want to have a shared NAVBAR and FOOTER in all public components/pages without duplicating them in every component.
routes.js
import ...
export const routes = [
// public
{ path: "",
name: 'main',
component: Main},
{ path: "/about",
name: 'about',
component: About},
// private
{ path: "/login",
name: 'login',
component: AdminLogin},
{ path: "/admin",
name: 'admin',
component: AdminHome}
]
The default route is MAIN where the "common public" components (navbar and footer) are found.
Main.vue
<template lang="html">
<div class="">
<app-navbar></app-navbar>
<div style="margin-top: 64px">
<home></home>
<div class="container">
<app-footer></app-footer>
</div>
</div>
</div>
</template>
<script>
import Home from './Home.vue'
import Navbar from './shared/Navbar.vue'
import Footer from './shared/Footer.vue'
export default {
components: {
Home,
'app-navbar': Navbar,
'app-footer': Footer
}
}
</script>
I want to only change the content in the "middle" based on the selected route. Currently, the default is <home>. How can I dynamically change it based on the routes? I don't want the same structure -> navbar, content, footer in all pages because it would be redundant. Is there a better approach to handle this?
Can I implement something like this in Main.vue:
navbar
case
when route == 'about' then import(about)
else import(home)
end
footer
What would be the best approach to achieve this?