命名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

以上案例相关的可运行代码,在 这里.

vue 命名视图的更多相关文章

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

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

  2. vue 中 命名视图的用法

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

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

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

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

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

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

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

  6. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  7. Vue系列之 =&gt; 命名视图实现经典布局

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

  8. vue路由5:命名视图

    <div id="app"> <div> <router-link to="/">首页</router-link> ...

  9. [译]Angular-ui 之 多命名视图(Multiple Named Views)

    ◄上一篇 (Nested States & Nested Views)     下一篇 (URL Routing) ► 你可以给你的视图命名,以便可以在单个模版当中拥有一个以上的 ui-vie ...

随机推荐

  1. 从Fiddler抓包到Jmeter接口测试(简单的思路)

    备注:本文为博主的同事总结的文章,未经博主允许不得转载. Fiddler下载和配置安装 从网上下载fiddler的安装包即可,直接默认,一直点击下一步,直至安装完成. 安装完成后直接打开Fiddler ...

  2. Jenkins - 持续集成环境搭建

    1. Jenkins 概述 Jenkins是一个开源的持续集成工具.持续集成主要功能是进行自动化的构建.自动化构建包括自动编译.发布和测试,从而尽快地发现集成错误,让团队能够更快的开发内聚的软件. 2 ...

  3. android-Okhttp初步使用

    自从谷歌把android的请求框架换成Okhttp后,android开发人员对其的讨论就变的越来越火热,所有咱作为一枚吊丝android程序员,也不能太落后,所以拿来自己研究一下,虽然目前项目开发用的 ...

  4. CSS3弹性盒模型之box-orient &amp; box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...

  5. 如何将ER图转换成关系模式集

    在ER图中,主要是实体类型和联系类型. 1.实体类型的转换 (“——”表示对应关系) 实体类型——关系模式 实体的属性——关系模式的属性 实体标识符——关系模式的键 2.联系的转换 一元联系较简单,三 ...

  6. 第8章BOM笔记

    第八章 BOM 一. Window 在浏览器中window有双重角色,他既是JavaScript访问浏览器窗口的一个借口,又是ECMAscript 规定的Global对象. 1.全局作用域 由于win ...

  7. C#Linq技术中SelectMany(...)函数的内部实现的伪代码

    我们先来假设这种场景: 一个学校中有多个年级,一个年级有多个班级,一个班级里有多个学生.这里我们只需要班级.年级.和学生这三个概念: 让我们先来定义Class类和Student类: // 注意,Cla ...

  8. Conjugate

    1.1Conjugate问题描述在不存在的 noip day3 里,小 w ⻅到了一堆堆的谜题.比如这题为什么会叫共轭?他并不知道答案.有 n 堆谜题,每堆有 a i 个,小 w 每次从剩下的谜题中选 ...

  9. .NET开发微信小程序(基础配置)

    1.微信小程序的必备Model public class WxConfig { /// <summary> /// 小程序的appId /// 登录小程序可以直接看到 /// </s ...

  10. Java NIO核心组件简介

    原文链接:http://tutorials.jenkov.com/java-nio/overview.html NIO包含下面几个核心的组件: Channels Buffer Selector 整个N ...