zoukankan html css js c++ java

Vue路由-使用命名视图实现经典布局

经典布局：上、左、右

html代码结构

<div id="app">
    <router-view></router-view>
    <div class="contain">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>

在路由中的components中可以设置组件对象，其中属性名为router-view占位符中的name值，属性值为组件名称

var router = new VueRouter({
    routes: [{path: '/', components: {
                default: header,
                left: leftBox,
                'main': mainBox
            }}]
})

页面样式使用flex布局

<style>
    .header{
        background-color: orange;
        height: 200px;
    }
    .contain{
        display: flex;
        height: 600px;
    }
    .left{
        background-color: lightgray;
        flex: 2;
    }
    .main{
        background-color: lightcoral;
        flex: 8;
    }
    html, body, h1{
        margin: 0;
        padding: 0;
        font-size: 16px;
    }
</style>

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .header{
            background-color: orange;
            height: 200px;
        }
        .contain{
            display: flex;
            height: 600px;
        }
        .left{
            background-color: lightgray;
            flex: 2;
        }
        .main{
            background-color: lightcoral;
            flex: 8;
        }
        html, body, h1{
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <div class="contain">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>

    <script>
        var header = {
            template: '<h1 class="header">这是header</h1>'
        }

        var leftBox  = {
            template: '<h1 class="left">这是left</h1>'
        }

        var mainBox  = {
            template: '<h1 class="main">这是main</h1>'
        }
        var router = new VueRouter({
            routes: [{path: '/', components: {
                        default: header,
                        left: leftBox,
                        'main': mainBox
                    }}]
        })

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

    </script>
</body>
</html>

页面如图：

查看全文

相关阅读:
2020/3/21 简单的学习
 2020/3/7 A-B
2020/3/6 旋转骰子
 2020/3/6 美丽数组
 面向对象程序设计寒假作业2
自我介绍
 深度优先搜索-迷宫问题（走迷宫题解）
开机方案题解
 好吃的巧克力题解
 数楼梯题解

原文地址：https://www.cnblogs.com/ella-li/p/14718667.html