Multiroute puzzle

What is multi-route puzzle, actually is a route (screen) to assemble multiple components, complete the entire page. We’re not just using the concatenation we did with the menu, we’re using the router-View’s name property

Layout/Header.vue

</div> </template>Copy the code

Layout/Sidebar.vue

</div> </template>Copy the code

Layout/Detail.vue

</p> </div> </template> </div> </template>Copy the code

Next we create the routing file

router/index.js

import SettingDetail from '@/components/Layout/Detail'
import SettingHeader from '@/components/Layout/Header'
import SettingSidebar from '@/components/Layout/Sidebar'
...
    routes: [
        {
            path: '/',
            name: 'Home',
            components: {
                myHeader: SettingHeader,
                mySidebar: SettingSidebar,
                myDetail: SettingDetail
            }
        }
    ]
Copy the code

index.vue

<el-container>
  <el-header>
    <router-view name="myHeader"></router-view>
  </el-header>
  <el-container>
    <el-aside width="200px">
        <router-view name="mySidebar"></router-view>
    </el-aside>
    <el-main>
        <router-view name="myDetail"></router-view>
    </el-main>
  </el-container>
</el-container>
Copy the code

This is my study