problem to the structure routes and components in vue.js

2

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?

    
asked by max 21.02.2018 в 16:27
source

1 answer

0

You have to delete the / from the sub-paths

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,
          }
        ]  
      }
   ]

Obviously I did not try it but it should work fine now
Here you have it pretty well explained and it's in Spanish Documentation

    
answered by 10.03.2018 в 11:19