vue学习笔记：7.4.路由-命名视图实现经典布局

最新推荐文章于 2023-12-27 11:40:39 发布

哈哈哈宝

最新推荐文章于 2023-12-27 11:40:39 发布

阅读量193

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/weixin_44101052/article/details/86511061

版权

Vue学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

效果图
只是一个简单的分块布局，可根据实际项目使页面更丰满
引入包

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

CSS

<style>
   *{
       margin: 0;
       padding:0;
       box-sizing: border-box;
   }
   html,body{
       width: 100%;
       height: 100%;
   }
   #app{
       width: 100%;
       height: 100%;
       padding: 10px;
   }
   .header{
       width: 100%;
       height: 80px;
       background-color: orange;
   }
   .container{
       display: flex;
       height: calc(100% - 90px);
       padding: 0;
       margin-top: 10px;
   }
   .left{
       flex: 2;
       background-color: lightgreen;
   }
   .main{
       flex: 8;
       background-color: lightcoral;
   }
</style>

HTML

<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 routerObj = new VueRouter({
        routes: [
            {
                path: "/",
                components: {
                    "default": header,
                    "left": leftBox,
                    "main": mainBox
                }
            }
        ]
    })

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

        },
        router: routerObj,
        methods: {
            
        }
    });
</script>