vue_路由实现布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
            html,
            body,
            h1 {
                margin: 0%;
                padding: 0%;
            }
            
            .header {
                height: 100px;
                background-color: aqua
            }
            
            .left {
                flex: 2;
                background-color: chartreuse;
                height: 600px;
            }
            
            .main {
                flex: 80%;
                background-color: gold;
                height: 600px;
            }
            
            .container {
                display: flex;
                height: 600px;
            }
        </style>
</head>
<body>
    <div id="app">
            <!-- 5. 占位符-->
            <router-view></router-view>
            <div class="container">
                <router-view name='left'></router-view>
                <router-view name='main'></router-view>
            </div>
    </div>

</body>
    <!--1、导入vue包-->
    <script src="./js/vue.min.js"></script>
    <!--1、导入router包-->
    <script src="./js/vue-router.js"></script>
    <!--1、创建vue实例（new对象）-->
    <script type="text/javascript">

        // 2.创建组件，以及对应的模板
        var header={
            template:'<h1 class="header">头部组件</h1>'
        }
        var left={
            template:'<h1 class="left">侧边栏组件</h1>'
        }
        var main={
            template:'<h1 class="main">main主题组件</h1>'
        }
        // 3.创建路由，用于管理组件，定义了路由规则
        var router=new VueRouter({
            routes:[
                // {path:'/',component:header},
                // {path:'/left',component:left},
                // {path:'/main',component:main},
                {
                    path:'/',components:{
                        'default':header,
                        'left':left,
                        'main':main
                    }
                }
            ],
        })
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{},
        //    4.将router注册到vue中
        router:router
        })
    </script>
</html>

 

posted @ 2021-05-24 17:16  Hhhr  阅读(229)  评论(0)    收藏  举报