Vue router-view and transition

used in layout,like head,body,foot,and body will be replaced by different content

config the component in router.ts.add children element.

router.ts

import LayoutPopup from '@/components/layout/index_popup.vue'

{

      path : '/xx/auth/' ,

      component : LayoutPopup ,

      children : [

        {

          path : 'xxxx1111' ,

          name : 'xxxx1111' ,

          meta : { title : 'xxxxx' } ,

          component : () => import( '@/views/xxx/xxxx1111/xxxx1111.vue' )  

        }

}

----------------------

index_popup.vue

< template >

  <div class = "dc-wrapper" >

    < Header ></ Header >

    <div class = "dc-main-container" >

      <div class = "dc-column -main" >

        < AppMain / >

      </div>

    </div>

    < Footer ></ Footer >

  </div>

</ template >

import AppMain from './main/app-main.vue'

-----------------------------

app-main.vue

< template >

  <transition>

    <router-view / >

  </transition>

</ template >