I just started using vue.js
and vue-router
in a small SPA , and I have a problem structuring my route tree .. firstly I have a parent component, which basically has two components children that are my navigation and footer menu, inside this parent component of name Full.vue I want all my routes to be rendered, I leave the code of this one so that it understand better:
<template>
<div id="app" >
<AppHeader/>
<router-view/>
<AppFooter/>
</div>
</template>
<script>
import { AppHeader, AppFooter } from '../components/'
export default {
name: 'full',
components: {
AppHeader,
AppFooter
}
}
</script>
and my route file looks like this:
import Full from './containers/Full.vue'
import Home './views/Home.vue'
import User from './views/User.vue'
import UserEdit from './views/UserEdit.vue'
export default [
{
path: '/',
name: 'Home',
redirect: '/dashboard',
component: Full,
meta: { requiresAuth: true },
children: [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: '/user',
name: 'User',
component: User,
children: [
{
path: '/edit/:id',
name: 'UserEdit',
components: UserEdit,
props: true,
}
]
}
]
As you see inside my routes, specifically in my USER route I have a child route that I pass a parameter to work with within my component, my problem is that this daughter route is not rendered properly, since within my navigation menu component and footer I have some images like logos etc, and just when I am heading towards this route, all these images are broken .. as I am new nose if this is the way to structure my routes between parents And daughters, what would be the correct way to do it?