命名视图实现经典布局

最新推荐文章于 2023-05-12 20:13:57 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2023-05-12 20:13:57 发布

阅读量729

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/99584996

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
    <style>
        .header{
            background-color: orange;
            height: 80px;
        }
        .container{
            display: flex;
            height: 600px;
        }
        .left{
            background-color: lightcoral;
            flex: 2;
            
        }
        .main{  
            background-color: lightblue;
            flex: 8; 
        }
        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>

    <script>

        var header = {
            template: '<h1 class="header">header头部区域</h1>'
        }
        var leftBox = {
            template: '<h1 class="left">Left侧边栏</h1>'
        }
        var mainBox = {
            template: '<h1 class="main">mainBox头部区域</h1>'
        }
        
        var router = new VueRouter({
            routes: [
                /*
                {path: '/', component: header},
                {path: '/left', component: leftBox},
                {path: '/main', component:mainBox},
                */
                {path:'/', components: {
                    'default': header,
                    'left': leftBox,
                    'main': mainBox
                }}
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                
            },
            router
        })
    </script>
</body>
</html>