400 vue命名视图：<router-view name="xxx"> </router-view>

导入：有时候想同时 (同级) 展示多个视图，

需求：访问 / 根目录，同时展示以下三个组件

三个组件

const header = {
    template： `<p>header  </p>`
}
const main = {
    template： `<p>main  </p>`
}
const footer = {
    template： `<p>footer  </p>`
}

规则

# 以前的那个方式只能显示三个 header
# 演示之前的效果 

routes： [
    {
        path： '/'，
        components： {
            default： header，
            m： main，
            f： footer
        }
    }
]

出口

<router-view> </router-view>
<router-view name="m"> </router-view>
<router-view name="f"> </router-view>

08-命名视图.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
       需求 :  /  => 三个组件 header main footer
     -->
    <div id="app">
        <!-- 4. 出口 -->
        <router-view></router-view>
        <router-view name="m"></router-view>
        <router-view name="f"></router-view>
    </div>
    
    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 3. 组件
        const header = {
            template: `<div>header组件</div>`
        }
        const main = {
            template: `<div>main组件</div>`
        }
        const footer = {
            template: `<div>footer组件</div>`
        }

        //  实例化
        const router = new VueRouter({
            // 2. 规则
            routes: [{
                path: '/',
                components: {
                    default: header,
                    m: main,
                    f: footer
                }
            }]
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>