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. Linux下安装配置 Jdk1.6+Tomcat6+Apache2.2.x+jk_mod1.2 详解

    本篇以Redhat AS5,内核为Linux 2.6.18-8.el5 为例,其中Redhat/Fedora系列基本一致,其他Linux或者版本均可以参考. STEP 1 软件下载:1. jdk1.6 ...

  2. AutoCompleteTextView

    在本节中作者只写了AutoCompleteTextView 和MutiAutoCompleteTextView 的用法,没有写怎样得到选中的值,我做了如下修改,增加按钮获取值赋值给TextView p ...

  3. js基础学习笔记（五）

    多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便. 语法: switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码 ...

  4. Python + Robotframework + Appium 之APP自动化测试实践（二）

    废话不多说,直接来实践(二),本次基于Android手机Settings模块下的search功能进行的自动化测试,代码如下 : *** Settings *** Library AppiumLibra ...

  5. MeshLab编译理解

    1.安装QT5.7,VS2013,QT_VA_Addin (涉及3D模型处理,采用64bit编译,且分为两种debug,release方式) 2.下载VCGlib库,放在meshlab的同级目录 (因 ...

  6. shell 脚本 批量修改文件名

    修改文件名前 #!/bin/bask # for a in $( ls /etc/yum.repos.d/CentOS* );do if [ $a != '/etc/yum.repos.d/CentO ...

  7. springMVC 开涛 Controller接口控制器

    通过注解实现控制器类,所以不用看Controller接口了.把之前的笔记保存下. 笔记(图片):http://pan.baidu.com/s/1mgMNDna 第三章看不太懂,3.2 3.3.只了解到 ...

  8. Hibernate 注解和配置文件两种方法的对比（有实例）

    hibernate多对多形式(User类<---->Educate类) 1.基于注解的形式: User类: package com.ssh.entities; import java.ut ...

  9. Spring MVC深入讲解

    一.前言: 大家好,Spring3 MVC是非常优秀的MVC框架,由其是在3.0版本发布后,现在有越来越多的团队选择了Spring3 MVC了.Spring3 MVC结构简单,应了那句话简单就是美,而 ...

  10. [leetcode] 15. Plus One

    这道题其实让我意识到了我的英文水平还有待加强.... 题目如下: Given a non-negative number represented as an array of digits, plus ...