Vue·页面布局

最新推荐文章于 2024-09-24 11:41:48 发布

青鸟遇鱼

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量1.3k

点赞数

分类专栏： S1-DD-前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43308318/article/details/125355729

版权

S1-DD-前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>Document</title>
    <!-- <script src='./js/vue2.js'></script> // 下载到本地使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- router地址 -->
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.min.js"></script>

    <style type="text/css">
      
        *{
            margin:0;
            padding:0;
        }
        .header{
            height: 70px;
            background-color: yellow;
            font-size: 20px;
            text-align: center;
        }
        .content{
            display: flex;
            height: 600px;
             background-color: #ccc;
        }
        .contentLeft{
            flex: 1;     /*布局占用页面比例*/
             background-color: crimson;

        }
        .contentRight{
            flex: 1;
            background-color: skyblue;
            
        }
        .footer{
            height: 50px;
            background-color: #ccc;
        }
        .myClass {
            color: red;
            font-weight: bold    /* 高亮加粗*/
        }

    </style>

    </head>
    <body>
 
    <hr>
 

    <template id="temp1"><div class="header"><h2>iam111 </h2></div></template>
    <template id="temp2"><div class="contentLeft"><h2>iam222 </h2></div></template>
    <template id="temp3"><div class="contentRight"><h2>iam333 </h2></div></template>
    <template id="temp4"><div><h2>iam444 </h2></div></template>
    <template id="temp">
        <div> <p>商品列表</p> <ul> <li>生活用品</li> <li>植物</li> <li>水果</li> <li>书籍</li> </ul> <router-link to='/'>返回</router-link></div> 
    </template>
  
    <div id='app'>   
            <!-- 路由占位符 -->
         <router-view></router-view> 
         <div class="content"> 
            <router-view name='lefts'></router-view>
            <router-view name='rights'></router-view>   
        </div>
        
        <router-view name='foots' ></router-view>
        <router-view name='temp'></router-view>
        <router-link to='/temp'>商品</router-link>
        
      
    </div>
</body>
 
    <script type="text/javascript">
 
        const header = {template: '#temp1'}
        const lefts = {template:'#temp2'} 
        const rights = {template: '#temp3'} 
        const foots = {template:'#temp4'}
        const temp = {template:'#temp'}

        // 设置路由
        const router =new VueRouter({
            routes:[ 
           
            {path:'/',
                components:{
                    'default':header,
                    'lefts':lefts,
                    'rights':rights,
                    'foots':foots,
                     
                }}, {path:'/temp',component:temp}, 
            ],
            linkActiveClass:'myClass'  // 设置高亮显示
        })
          
        const vm = new Vue({
            el: '#app', // 获取element元素
            router,
        })
    </script>
</html>