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

最新推荐文章于 2019-11-29 15:39:18 发布

雲胡不喜

最新推荐文章于 2019-11-29 15:39:18 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_40596594/article/details/101197365

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../node_modules/vue-router/dist/vue-router.js"></script>

    <style>
        .header{
            background-color: #c3c3c3;
            height: 80px;
        }
        .container{
            width: 100%;
            height: 600px;
           display: flex;


        }
   h1{
        margin: 0;
        padding: 0;
        font-size: 20px;
    }
        .left{
            flex: 2;
            background-color: pink;
        }
        .main{
            flex:8;
            background-color: #b9def0;
        }
    </style>


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



</div>

<script>

    var header = {
        template: '<h1 class="header">头部区域</h1>'
    }

    var leftbox = {
        template:'<h1 class="left">侧边栏区域</h1>'
    }

    var mainbox = {
        template:'<h1 class="main">主体区域</h1>'
    }



    var routerObj = new  VueRouter({
        routes:[
            {
                path:'/',
                components:{
                    'default':header,
                    'left':leftbox,
                    'main':mainbox
                }
            }

        ]
    })
    var  vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        router:routerObj
    });
</script>
</body>
</html>

雲胡不喜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由----命名视图实现经典布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../node_modules/vue/dist/vue.js"></script&...
复制链接

扫一扫