命名视图实现经典布局（展示多个同级组件）

作者: 小丘啦啦啦 | 来源:发表于2019-04-29 09:13 被阅读0次

命名视图实现经典布局（展示多个同级组件）
vue使用命名视图实现同一路由拆分
2020-02-28
vue 命名路由和命名视图
Vue-router 单页面多路由区域操作
vue路由--命名视图
Vue的命名视图
命名视图
vue-router命名视图的意义
IOS开发手动布局子视图

之前只有一个页面展示一个组件（不包括路由嵌套的组件），如果需要同一个URL同时展示多个组件，则路由规则使用components属性，设置不同的<router-view></router-view>（指定不同的name名称）展示不同组件，可以设置默认展示和不同名称的容器展示不同的组件。

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入vue路由的包 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

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

        .main {
            background-color: lightpink;
            flex: 8;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 默认容器 -->
        <router-view></router-view>
        <!-- 使用css3的flex布局，包起来 -->
        <div class="container">
            <!-- 给容器指定name名称，加载对应组件 -->
            <router-view name="left"></router-view>
            <!-- 给容器指定name名称，加载对应组件 -->
            <router-view name="main"></router-view>
        </div>
    </div>
    <template id="headerBox">
        <h1 class="header">headerBox组件</h1>
    </template>
    <template id="leftBox">
        <h1 class="left">leftBox组件</h1>
    </template>
    <template id="mainBox">
        <h1 class="main">mainBox组件</h1>
    </template>
    <script>
        var headerBox = {
            template: '#headerBox',
        }
        var leftBox = {
            template: '#leftBox'
        }
        var mainBox = {
            template: '#mainBox'
        }
        var router = new VueRouter({
            routes: [{
                path: '/',
                components: { //components同时展示多个组件，多了个s
                    default: headerBox, //默认容器放headerBox组件
                    left: leftBox, //name为left的容器放leftBox组件
                    main: mainBox //name为main的容器放leftBox组件
                }
            }, ]
        });
        var vm = new Vue({
            el: "#app",
            data: {

            },
            router
        });
    </script>
</body>

</html>