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

相关Html:

<!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>

  <script src="./lib/vue-2.4.0.js"></script>

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

  <style>

    html,

    body {

      margin: 0;

      padding: 0;

    }

    .header {

      background-color: orange;

      height: 80px;

    }

    h1 {

      margin: 0;

      padding: 0;

      font-size: 16px;

    }

    .container {

      display: flex;

      height: 600px;

    }

    .left {

      background-color: lightgreen;

      flex: 2;

    }

    .main {

      background-color: lightpink;

      flex: 8;

    }

  </style>

</head>

<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">Header头部区域</h1>'

    }

    var leftBox = {

      template: '<h1 class="left">Left侧边栏区域</h1>'

    }

    var mainBox = {

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

    }

    // 创建路由对象

    var router = new VueRouter({

      routes: [

        /* { path: '/', component: header },

        { path: '/left', component: leftBox },

        { path: '/main', component: mainBox } */

        {

          path: '/', components: {

            'default': header,

            'left': leftBox,

            'main': mainBox

          }

        }

      ]

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {},

      router

    });

  </script>

</body>

</html>

Vue路由-命名视图实现经典布局的更多相关文章

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

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

  2. vue命名视图实现经典布局

    vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. vue路由--命名视图

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

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

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

  5. vue 中 命名视图的用法

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

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

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

  7. vue路由--命名路由

    有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...

  8. [vue]vue路由篇vue-router

    spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query ...

  9. Vue路由讲解

    1>router-link和router-view组件 2>路由配置 a.动态路由 import Home from "@/views/Home.vue"; expor ...

随机推荐

  1. Android属性动画之ValueAnimator的介绍

    之前两篇博客,介绍的是ObjectAnimator作用与某一个控件的某一个属性.但我们的ValueAnimator它本身并不会作用与任何一个属性,它本身也不会提供任何一种动画.它简单的来说,就是一个数 ...

  2. Center Alignment

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=93359#problem/B(456321) http://codeforces.com/ ...

  3. ZUFE2389: Occult的卡片升级计划(DP) 2016-05-17 23:12 113人阅读 评论(0) 收藏

    2389: Occult的卡片升级计划 Description Occult喜欢玩一款手游,手游中有很多好看的卡片.他想要升级这些卡. 现在他有m块经验石,目标是强化一张卡片,卡片最开始的时候是0级, ...

  4. Linux SSH无密码登录

    Linux服务器常见的登录方式有两种:密码登录.秘钥登录.工作中我们最常使用的是用秘钥登录的方法,因为使用秘钥登录更高效.更安全. 如何实现SSH无密码登录: 原理:无密码ssh登录的主要操作为将本机 ...

  5. [ACM_数据结构] HDU 1166 敌兵布阵 线段树 或 树状数组

    #include<iostream> #include<cstdio> #include<memory.h> using namespace std; ]; //- ...

  6. 在AbpZero中hangfire后台作业的使用——开启hangfire

    AbpZero框架已经集成了hangfire,但它默认是关闭的,我们可以在运行站点下的Startup.cs文件中把这行代码注释取消就行了,代码如下:     //Hangfire (Enable to ...

  7. 开源一款强大的文件服务组件（QJ_FileCenter）（系列一）

    系列文章 1. 开源一款强大的文件服务组件(QJ_FileCenter)(系列一) 2. 开源一款强大的文件服务组件(QJ_FileCenter)(系列二 安装说明) 3. 开源一款强大的文件服务组件 ...

  8. ASP.NET Core 2 学习笔记（五）静态文件

    之前的ASP.NET网站,只要把*.html.*.css.*.jpg.*.png.*.js等静态文件放在项目根目录,默认都可以直接被浏览:但ASP.NET Core 小改了浏览静态文件的方式,默认根目 ...

  9. .net core api Post请求

    POST请求: 1.请求类型:Content-Type:application/json,参数:json字符串 后台接收参数: 1)([FromBody]UserInfo user)必须以对象形式接收 ...

  10. OVS 内核KEY值提取及匹配流表代码分析

    原文链接:http://ry0117.com/2016/12/24/OVS内核KEY值提取及匹配流表代码分析/ 当开启OVS后,创建datapath类型为system的网桥并他添加相关接口,OVS网桥 ...