vue学习006

最新推荐文章于 2023-09-21 20:18:52 发布

101之歌

最新推荐文章于 2023-09-21 20:18:52 发布

阅读量103

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qxf1374268/article/details/90047644

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过路由实现经典布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现经典布局</title>
    <script src="vue.js"></script>
    <script src="vue-route.js"></script>
    <style>
        .header{
            background-color: orange;
            height: 80px;
        }
        .left{
            background-color: lightcoral;
            flex: 2;
        }
        .main{
            background-color: lightblue;
            flex: 8;
        }
        .container{
            display: flex;
            height: 600px;
        }
        h1{
            margin: 0;
            padding: 0;
            font-size: 10px;
        }
        html, body{
            margin: 0;
            padding: 0;
        }


    </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>

</body>

<script>
    var header = {
        template: "<h1 class='header'>头部</h1>"
    };
    var left = {
        template: "<h1 class='left'>左侧</h1>"
    };
    var main = {
        template: "<h1 class='main'>主体</h1>"
    };

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


    var app = new Vue({
        el:'#app',
        router
    })
</script>
</html>

101之歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习006

通过路由实现经典布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现经典布局</title> <script src="vue.js"></script> <scrip...
复制链接

扫一扫

专栏目录