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. timescale

    `timescale 1ns/100ps     表示时延单位为1ns, 时延精度为100ps.`timescale 编译器指令在模块说明外部出现, 并且影响后面所有的时延值.

  2. spss-非参数检验-K多个独立样本检验（ Kruskal-Wallis检验）案例解析

    今天和大家一起探讨和分下一下SPSS-非参数检验--K个独立样本检验 ( Kruskal-Wallis检验). 还是以SPSS教程为例: 假设:HO:   不同地区的儿童,身高分布是相同的 H1: 不 ...

  3. 20155225 2016-2017-2 《Java程序设计》第九周学习总结

    20155225 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC入门 了解JDBC架构 使用JDBC API JDBC是用于执行SQL的解决方案,开 ...

  4. Hdu1896 Stones(优先队列) 2017-01-17 13:07 40人阅读 评论(0) 收藏

    Stones Time Limit : 5000/3000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submis ...

  5. poj3321-Apple Tree（DFS序+树状数组）

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 36442   Accepted: 10894 Desc ...

  6. Lucene原理一

    Lucene 是一个高效的,基于Java 的全文检索库. 所以在了解Lucene之前要费一番工夫了解一下全文检索. 那么什么叫做全文检索呢?这要从我们生活中的数据说起. 我们生活中的数据总体分为两种: ...

  7. hdu 2780 Su-Su-Sudoku（DFS数独）

    题目链接:hdu2780 #include<stdio.h> #include<string.h> #include<queue> #include<math ...

  8. java对redis的基本操作（一）

    一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6

  9. .net core 读取本地指定目录下的文件

    项目需求 asp.net core 读取log目录下的.log文件,.log文件的内容如下: xxx.log ------------------------------------------beg ...

  10. UWP开发---嵌套DataTemplate&模板选择器

    对于Json结构体items不完全一致的情况下,在UWP平台是如何处理数据,并通过不同的模板选择,进行显示呢? 一,嵌套Json分析 1,结构 通过抓取index的API(点击请求API)获取到的js ...