25 Vue命名视图

最新推荐文章于 2023-08-14 19:53:18 发布

Civitasv

最新推荐文章于 2023-08-14 19:53:18 发布

阅读量307

点赞数

分类专栏： Vue 文章标签： vue root-view components

本文链接：https://blog.csdn.net/qq_40996400/article/details/104425747

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

命名视图

root-view标签含有name属性，可以指向想要显示的组件名称，这一点常常被用于在同一时间展示多个组件的情况之下。下面是一个例子：

<!DOCTYPE html>
<html lang="en">

<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>Vue路由多组件</title>
    <script src="vue/vue.js"></script>
    <script src="vue/vue-router.js"></script>
    <style>
        .container {
            display: flex;
            height: 600px;
        }

        h3 {
            margin: 0;
            padding: 0;
        }

        .header {
            height: 200px;
            background-color: blueviolet;
        }

        .left {
            background-color: aquamarine;
            flex: 2;
        }

        .main {
            background-color: beige;
            flex: 8;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view name="header"></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>

    <template id="header">
        <div>
            <h3 class="header">Header</h3>
        </div>
    </template>

    <script>
        var header = {
            template: "#header"
        }

        var left = {
            template: "<h3 class='left'>LeftBox</h3>"
        }

        var main = {
            template: "<h3 class='main'>MainBox</h3>"
        }

        const router = new VueRouter({
            routes: [
                {
                    path: "/", components: {
                        "header": header,
                        "left": left,
                        "main": main
                    }
                }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {
            },
            router: router
        })
    </script>
</body>

</html>