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. Win7 SP1 提示ADO的问题

    需要安装  Windows6.1-KB2640696-v3-x64.msu 这个Pack

  2. js模态窗口返回值(table)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. GitHub 安装配置

    1:到 Github 注册 页面中注册,填写用户名.邮箱和密码 选择免费服务 步骤三可以根据自身喜好勾选或者直接跳过 2.1.2 创建远程仓库 创建完账号后,可以开始创建仓库 但是这里我们还没有验证邮 ...

  4. js基础学习笔记（四）

    4.1 什么是数组 我们知道变量用来存储数据,一个变量只能存储一个内容,存储多个值时,就需要用到数组. 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数 ...

  5. Center Alignment

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

  6. spring读取数据库的配置信息（url、username、password）时的<bean>PropertyPlaceholderConfigurer的用法

    用法1: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w ...

  7. [转载]HTML5游戏前端开发秘籍

    http://isux.tencent.com/html5-game-development-cheats.html 转载至腾讯ISUX HTML5游戏前端开发秘籍 本文由米随随编写 QQ空间Andr ...

  8. Java中HTTP通信

    Java自带的get.post请求: get请求方式: package com.java; import java.io.BufferedReader; import java.io.IOExcept ...

  9. Intellij IDEA 14的注册机（Java版）

    import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.zip.CR ...

  10. 教程-Delphi调用百度地图API(XE8+WIN7)

    unit U_map; interface //---------------------------------------------------// //----------COPY BY 无言 ...