Vue-Router 多路由拼图

多路由拼图

什么是多路由拼图，实际就是为一个路由(画面)组合多个组件，完成整个页面。这里利用的不单单是我们在做菜单时的拼接，利用的是router-view的name属性

Layout/Header.vue

<template>
    <div>
        我的世界崩塌了
    </div>
</template>

Layout/Sidebar.vue

<template>
    <div>
        左边跟我一起画个龙
    </div>
</template>

Layout/Detail.vue

<template>
    <div>
        <p>这就是一个人在这狂按键盘，为了就是错字数，所以 千万不要看这块，这是没用的</p>
    </div>
</template>

下一步我们创建路由文件

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

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>

以上就是我的学习