vue 使用命名视图实现经典布局-------components里面传对象-----router-view里面增加name属性

最新推荐文章于 2023-12-29 14:11:25 发布

天马行空zqzq

最新推荐文章于 2023-12-29 14:11:25 发布

阅读量679

点赞数 3

本文链接：https://blog.csdn.net/qq_42039912/article/details/107431583

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 80px;
            width: 100%;
            background-color: green;
        }
        .container {
            display: flex;
            height: 600px;
        }
        .left {
            flex: 2;
            background-color: pink;
           
        }
        .main {
            flex: 8;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第一个不填代表默认 -->
        <router-view class="header"></router-view> 
        <div class="container">
            <!-- 指定名字 -->
            <router-view name="left" class="left"></router-view> 
            <router-view name="main" class="main"></router-view>
        </div> 
    </div>

    <script>
        var header = {
            template: '<h1>头部</h1>'
        }
        var left = {
            template: '<h1>左侧</h1>'
        }

        var main = {
            template: '<h1>右侧</h1>'
        }

        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    //加了s可以填多个组件，default代表默认
                    //其他的名字随便取，但要和router-view里面的相对应
                    components: {
                        'default': header,
                        'left': left,
                        'main': main
                    }
                }
            ]
        })

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

</html>

天马行空zqzq

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 使用命名视图实现经典布局-------components里面传对象-----router-view里面增加name属性

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
复制链接

扫一扫