Vue 第十二章 命名视图实现经典布局

1、命名视图

  routes:[
                {
                    path:'/',components:{
                        default:header,
                        'left':leftBox,
                        'main':mainBox
                    }
                }
            ]

2、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>

    <style>
        .header{
            background-color: orange;
            height: 80px;
        }
        .container{
            display: flex;
            height: 700px;
        }
        .left{
            background-color: lightblue;
            flex: 2;
        }
        .main{
            background-color: lightpink;
            flex: 8;
        }
    </style>
</head>
<body>
<div id="app">
    <router-view ></router-view>
    <div class="container">
<!--        一个router-view占用一个组件的视图-->
        <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">mian部区域</h1>'
    }

    var router = new VueRouter({
            routes:[
                {
                    path:'/',components:{
                        default:header,
                        'left':leftBox,
                        'main':mainBox
                    }
                }
            ]
    })
    //2.创建一个vue实例
    var vm = new Vue({
        el: '#app',    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
        },
        router
    })
</script>
</body>
</html>

 

posted @ 2020-03-24 21:24  小白啊小白，Fighting  阅读(280)  评论(0)  编辑  收藏  举报