03路由 vue在根路径下实现页面布局

最新推荐文章于 2024-05-08 20:39:29 发布

asdfwxy

最新推荐文章于 2024-05-08 20:39:29 发布

阅读量645

点赞数

分类专栏： vue 文章标签： vue实现页面布局

本文链接：https://blog.csdn.net/asdfwxy/article/details/102626771

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1：routes下面的path匹配根路径，components可以对应多个组件名。
根据里面设置name，在组件中根据name写组件名称，可根据class添加样式。

 <style>
    *{
        margin: 0;
        padding: 0;
    }
    .head{
        margin: 5px;
        height: 100px;
        background-color:pink;
    }
    .container {
        display:flex;
        height: 600px;
        margin: 5px;
    }
    .left{
        flex:2;
        background-color: red;
    }
    .main{
        flex:8;
        background-color:skyblue;
    }
    </style>
</head>
<body>
    <div id="app">
        <router-link to="head"></router-link>
        <router-link to="left"></router-link>
        <router-link to=main></router-link>

        <!-- #2 在这里写name的值 -->
        <router-view class="head"></router-view>
        <div class="container">
            <router-view name="left" class="left"></router-view>
            <router-view name="main" class="main"></router-view>
        </div>
    </div>
    <template id="head">  
        <div><!-- #3  在template,也就是组件内容中设置组件样式 -->
            <h1>head组件</h1>
        </div>
    </template>
    <template id="left">
        <div>
            <h1>left组件</h1>
        </div>
    </template>
    <template id="main">
        <div>
            <h1>main组件</h1>
        </div>
    </template>
    <script>
        var head = {
            template:'#head'
        }
        var left = {
            template:'#left'
        }
        var main = {
            template:'#main'
        }
        // #1 在根路径在,默认显示多个组件使用components,默认head组件，如果name=left，left组件
        var router = new VueRouter({
            routes:[
                {path:'/',components:{
                    'default':head,**//前面带引号的是router-link中设置的name，后面是对应的组件名。**
                    'left':left,
                    'main':main
                }}
            ]
        })
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{},
            router
        })
    </script>

asdfwxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03路由 vue在根路径下实现页面布局

1：routes下面的path匹配根路径，components可以对应多个组件名。根据里面设置name，在组件中根据name写组件名称，可根据class添加样式。 <style> *{ margin: 0; padding: 0; } .head{ margin: 5px; height: 10...
复制链接

扫一扫