vue命名视图实现经典布局

 <!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>Document</title>

 </head>

 <script src="vue.js"></script>

 <script src="vue-router.js"></script>

 <style>

 .header{

     background-color: orange;

     height: 80px;

 }

 h1{

     margin: 0;

     padding: 0

 }

 .container{

     display: flex;

     flex: 2

 }

 .left{

 background-color: red;

 height: 800px

 }

 .main{

 background-color: aqua;

 flex: 8;

 height: 800px

 }

 </style>

 <body>

     <div id="app">

         <router-view ></router-view>

         <div class="container">

                 <router-view name="left"></router-view>

                 <router-view name="main"></router-view>

         </div>

     </div>

    <script>

        var header={

            template:'<h1 class="header">头部区域</h1>'

        }

        var leftBox={

            template:'<h1 class="left">left区域</h1>'

        }

        var mainBox={

            template:'<h1 class="main">main区域</h1>'

        }

        var router=new VueRouter({

            routes:[

               { path: '/', components: {

                  'default':header,

                   'left':leftBox,

                   'main':mainBox

               }

             },

            ]

        })

         var vm=new Vue({

             el:'#app',

             data:{},

             methods: {

             },

             router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件

         })

     </script>

 </body>

 </html>

vue命名视图实现经典布局的更多相关文章

  1. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. Vue学习笔记【29】——Vue路由（命名视图实现经典布局）

    命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    < ...

  3. Vue系列之 => 命名视图实现经典布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. vue 命名视图

    命名视图 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命 ...

  5. VUE router-view 页面布局 （嵌套路由+命名视图）

    嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...

  6. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  7. vue路由--命名视图

    有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命名的视图, ...

  8. 062——VUE中vue-router之命名视图的实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

随机推荐

  1. SpringMVC使用StandardServletMultipartResolver上传文件

    DispatcherServlet并没有实现任何解析multipart请求数据的功能,它将该任务委托给了Spring中MultipartResolver策略接口的实现,通过该接口的实现类来解析mult ...

  2. Appnium-API-Dvice

    Device Activity Start Activity Start an Android activity by providing package name and activity name ...

  3. ptmalloc内存分配释放

    出处 分配: 1)获取分配区的锁,为了防止多个线程同时访问同一个分配区,在进行分配之前需要取得分配区域的锁.线程先查看线程私有实例中是否已经存在一个分配区,如果存在尝试对该分配区加锁,如果加锁成功,使 ...

  4. 高可用Redis(十三)：Redis缓存的使用和设计

    1.缓存的受益和成本 1.1 受益 1.可以加速读写:Redis是基于内存的数据源,通过缓存加速数据读取速度 2.降低后端负载:后端服务器通过前端缓存降低负载,业务端使用Redis降低后端数据源的负载 ...

  5. python面试题---收藏的笔记

    第一部分 Python基础篇(80题) 为什么学习Python? 通过什么途径学习的Python? Python和Java.PHP.C.C#.C++等其他语言的对比? 简述解释型和编译型编程语言? P ...

  6. 具体分析UGUI中RectTransform

    一:RectTransform 组件 1.Transform 组件是所有的游戏物体必备的一个组件,且不可删除,不可隐藏.就算是一个空物体,也是具备 Transform 组件的. Unity3D4.6 ...

  7. [原创]X-HDL 4.2安装与使用

    由于涉及到VHDL工程,但实际工作中,用Verilog更多些,因此安装X-HDL进行转换,安装步骤与使用如下: X-HDL进行破解,破解如下: 安装完毕后,打开一个带转换的文件,进行如下操作: 链接: ...

  8. [原创]Zynq SDIO WIFI SotfAP调试

    编译好kernel和driver 加载firmware后,运行下述命令. mkdir /var/run/ mkdir /var/run/hostapd   ifconfig -a           ...

  9. spring boot 2.0 配置双数据源 MySQL 和 SqlServer

    参考:https://www.cnblogs.com/xiaofengfeng/p/9552816.html 安装 org.mybatis.spring.boot:mybatis-spring-boo ...

  10. .NET英文技术文章导读(2017-03-23)

    关键字:VS2017.扩展.Service Fabric.Unit Test.ELMAH Web开发人员必装的5个VS2017扩展 作者:Jeffrey T. Fritz 链接:https://blo ...