vue 路由经典布局

最新推荐文章于 2025-03-22 19:51:10 发布

原创最新推荐文章于 2025-03-22 19:51:10 发布 · 445 阅读

CC 4.0 BY-SA版权

<style>
        body,div,h1{
            padding:0;
            margin:0;
        }
        .header{
            background: red;
        }
        .container{
            display:flex;
            height:600px;
        }
        .left{
            background: green;
            flex:2;
        }
        .right{
            background: pink;
            flex:8;
        }
    </style>

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

    </div>



    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <script src="vue-router.js"></script>
<script>
        var header={
            template:'<h1>我是顶部栏</h1>'
        };
        var sidebar={
            template:'<h1>我是侧边栏</h1>'
        };
        var main={
            template:'<h1>我是主栏</h1>'
        };


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



        new Vue({
            el:'#app',
            data:{
                list:[
                    { id: Date.now(), user: '司马迁', content: '欲加之罪！' },
                    { id: Date.now()+1, user: '庄子', content: '水击千里！' },
                    { id: Date.now()+2, user: '刘庄', content: '美女很多！' }
                ]
            },
            router:vr

        })



</script>