vue——38-路由命名视图实现经典布局

css

        h1, body {
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: orange;
            height: 80px;
        }

        .container {
            display: flex;
            height: 700px;
        }

        .left {
            background-color: lightgreen;
            flex: 2;
        }

        .main {
            background-color: lightpink;
            flex: 8;
        }

html

<div id="app">
    <router-view name="default" class="header"></router-view>
    <div class="container">
        <router-view name="left" class="left"></router-view>
        <router-view name="main" class="main"></router-view>
    </div>
</div>

js

        let header = {
            template: '<h1>Header 头部区域！</h1>'
        };

        let leftbox = {
            template: '<h1>Left 侧边栏区域！</h1>'
        };

        let mainbox = {
            template: '<h1>main 主体区域！</h1>'
        };

        let router = new VueRouter({
            routes: [
                {
                    // 原来是 component，一个路径只能存放一个组件，现在 components 一个
                    // 路径可以存放多个组件，再在上面的 router-view 中名字引用不同组件即可
                    path: '/', components: {
                        default: header,
                        left: leftbox,
                        main: mainbox
                    }
                },

            ]
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });