vue 메뉴 경로 3depth 구성요소

---

Empty parent in nested routes

---

메뉴로 삼단계를 구성

const menu3 = {
    path: '/A/AA',
    component: Layout,
    redirect: 'noRedirect',
    name: '할아버지 메뉴',
    meta: {
      title: '할아버지 메뉴',
      icon: 'search'
    },
    children: [
        {
          path: '/AAA',
          component: () => import('@/views/test/test'),
          name: '아빠 메뉴',
          meta: { title: '아빠 메뉴', noCache: true },
          children: [
            {
              path: 'AAAA',
              component: () => import('@/views1/test1/test1'),
              name: '아들 메뉴',
              meta: { title: '아들 메뉴', noCache: true }
            }
        ]
        }
    ]
 }

 

메뉴로 삼단계를 구성하다 보니까 생기는 문제점이 

<router-view></router-view> 안에 구성되어야 하는 것들은 제일 하위 자식인데

 

위의 예시로 보면 아빠 메뉴가 <router-view></router-view> 안에 렌더링 되는 것이다.

 

나는 @/views1/test1/test1 애를 봐야 하는데

애가 @/views/test/test 뜨는 것이다.

 

당연히 할아버지가 가지고 있는 Layout 과 함께 아빠만 뜨니까 화가나는 경우였다.

---

const menu3 = {
    path: '/A/AA',
    component: Layout,
    redirect: 'noRedirect',
    name: '할아버지 메뉴',
    meta: {
      title: '할아버지 메뉴',
      icon: 'search'
    },
    children: [
        {
          path: '/AAA',
          component: Layout,
          name: '아빠 메뉴',
          meta: { title: '아빠 메뉴', noCache: true },
          children: [
            {
              path: 'AAAA',
              component: () => import('@/views1/test1/test1'),
              name: '아들 메뉴',
              meta: { title: '아들 메뉴', noCache: true }
            }
        ]
        }
    ]
 }

이렇게 해봤더니 자식요소가 나오기는 나오는데 할아버지 요소 아빠 요소 아들 요소 모두 나와서 내가 원하는 방식으로 나오지 않았고,

 

---

const menu3 = {
    path: '/A/AA',
    component: Layout,
    redirect: 'noRedirect',
    name: '할아버지 메뉴',
    meta: {
      title: '할아버지 메뉴',
      icon: 'search'
    },
    children: [
        {
          path: '/AAA',

        component: {

          render (c) { return c('router-view') }

        },

          name: '아빠 메뉴',
          meta: { title: '아빠 메뉴', noCache: true },
          children: [
            {
              path: 'AAAA',
              component: () => import('@/views1/test1/test1'),
              name: '아들 메뉴',
              meta: { title: '아들 메뉴', noCache: true }
            }
        ]
        }
    ]
 }

 

위의 방법으로 해결을 했는데

 

component: {

      render (c) { return c('router-view') }

},

 

중간의 아빠 요소가 하는 일은 그냥  <router-view></router-view> 이걸로 만들어 버린 것이다.

애초에 아빠 요소가 하는 일이 없기 때문에 상관은 없을 것 같은데,

 

뭐 아래 다 같은 방법이라고 하니깐 .. 이 방법이 맞는건가 싶지만 어차피 중간 메뉴인 아빠 메뉴는 연결하는 역활은 아니니깐.. 

 

첫번째 방법

component: {

  render(c) { return c('router-view') }

}

 

두번째 방법

component: {

  template: `<router-view></router-view>`

}

 

세번째 방법

component: {

  render(createElement) {

    return createElement('router-view')

  }

}

---

 

해결하는데 도움 받은 링크들

kr.vuejs.org/v2/guide/render-function.html

 

github.com/vuejs/vue-router/issues/745