15-Vue之命名视图

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

爱学习de测试小白

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

阅读量504

点赞数

分类专栏： # Vue

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/119850681

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

使用说明

代码示例

使用说明

使用场景：1个路由规则对应多个组件
组件components：可配置多个组件，组件名称:组件对象

代码示例

<!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>命名视图</title>
    <!-- 6.创建样式 -->
    <style>
        html,body,p{
            margin: 0;
            padding: 0;
            font-size: 25px;
        }
        .header{
            background-color: palegreen;
            height: 60px;
        }
        .container{
            height: 500px;
            display: flex;
        }
        .sidebar{
            background-color:palevioletred;
            flex: 2;
        }

       
        .content{
            background-color: purple;
            flex: 8;

        }
        .footer{
            background-color: seagreen;
            height: 100px;

        }

    </style>
</head>
<body>
    <!-- 5.创建显示的标签 -->
    <div id="app">
        <!-- 展示匹配的路由组件 -->
        <router-view name='top'></router-view>
        <div class="container">
            <router-view name='left'></router-view>
            <router-view name='right'></router-view>
        </div>
        <router-view name='bottom'></router-view>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 1.导入路由文件 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        //2.创建对应的组件
        const header = {
             template: '<p class="header">这是头部区域</p>'
             }
        const sidebar = {
             template: '<p  class="sidebar">这是左边栏</p>'
             }
        const content = { 
            template: '<p class="content">这是右侧内容区</p>' 
        }
        const footer = {
             template: '<p class="footer">这是底部区域</p>' 
            }

        //3.创建路由对象
       const router = new VueRouter({
           routes:[
            //*** 路由规则 路由和组件对应关系
            {path:'/',components:{
                //组件名称:组件对象
                'top':header,
                'left':sidebar,
                'right':content,
                'bottom': footer
            }},
           
           ]
       });

       // 4.挂载路由对象
       var vm = new Vue({
           el:"#app",
           data:{

           },
           methoods:{

           },
           router:router
       });
    </script>
</body>
</html>

爱学习de测试小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
15-Vue之命名视图

目录使用说明代码示例使用说明使用场景：1个路由规则对应多个组件组件components：可配置多个组件，组件名称:组件对象代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
复制链接

扫一扫