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

最新推荐文章于 2020-09-14 12:21:10 发布

wahaha-me

最新推荐文章于 2020-09-14 12:21:10 发布

阅读量231

点赞数

分类专栏： vue学习文章标签：路由命名实现经典布局

vue学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            height: 80px;
            background-color: #0f70ae;
        }
        .contain{
            display: flex;
            height: 600px;
        }
        .left{
            background-color: red;
            flex:2
        }
        .right{
            background-color: yellow;
            flex: 8;
        }
    </style>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <div class="contain">
        <router-view name="left"></router-view>
        <router-view name="right"></router-view>
    </div>
    <!--<router-view name="left"></router-view>-->
    <!--<router-view name="right"></router-view>-->
</div>


<script>
    var header = {
      template:'<h1 class="header">这是头部header</h1>'
    }
    var headerleft = {
      template:'<h1 class="left">这是头部header-----left</h1>'
    }
    var headerright = {
      template:'<h1 class="right">这是头部header-----right</h1>'
    }
    var router=new VueRouter({
      routes:[
        {path:'/',components:{
          default:header,
            left:headerleft,
            right:headerright
          }},

      ]
    })
    var vm= new Vue({
    el:'#app',
    data:{},
    router:router,
    methods:{}
    })
</script>

</body>
</html>