主要是构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的。比如:

视图层:

<div id="app">
<router-view></router-view>
</div>

路由定义:

router.map({
'/foo': {
// 路由匹配到/foo时,会渲染一个Foo组件
component: Foo
}
})

初始化实例:

// start app
var App = Vue.extend({})
router.start(App, '#app')

当你访问 /foo 时,router-view 就被 Foo 组件替换了。

组件的嵌套,一样的逻辑,看下文档和demo吧。 嵌套路由

转 router-view 的理解的更多相关文章

  1. vue项目过程的理解: main.js文件理解 router.js文件理解 以及组件 路由 等之间的关系

    https://blog.csdn.net/qq_26229005/article/details/85040393 内容太多了,有空再整理

  2. 理解OpenShift(1):网络之 Router 和 Route

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  3. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  4. 理解OpenShift(4):用户及权限管理

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  5. [diango]理解django视图工作原理

    前言:正确理解django视图view,模型model,模板的概念及其之间的关联关系,才能快速学习并上手使用django制作网页 本文主要讲解自己在学习django后对视图view的理解 在进入正文之 ...

  6. Android 自定义view(二) —— attr 使用

    前言: attr 在前一篇文章<Android 自定义view -- attr理解>已经简单的进行了介绍和创建,那么这篇文章就来一步步说说attr的简单使用吧 自定义view简单实现步骤 ...

  7. Android自定义View的实现方法,带你一步步深入了解View(四)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17357967 不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回 ...

  8. Android视图状态及重绘流程分析,带你一步步深入了解View(三)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17045157 在前面一篇文章中,我带着大家一起从源码的层面上分析了视图的绘制流程, ...

  9. Android视图绘制流程完全解析,带你一步步深入了解View(二)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/16330267 在上一篇文章中,我带着大家一起剖析了一下LayoutInflater ...

  10. 【转】Android自定义View的实现方法,带你一步步深入了解View(四)

    原文网址: 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17357967 不知不觉中,带你一步步深入了解View系列的文章已经写到 ...

随机推荐

  1. k3 cloud出现应收单下推收款单,把收款单是结算方式修改成银行承兑汇票之后保存提示:收款单明细中结算方式为票据业务的实收金额之和不等于票据的当前占用金额之和,请检查数据!

    收款单结算方式选择[银行承兑汇票],系统就默认该笔业务在系统中要存在一张应收票据.则在应收票据页签,需要选择一张出纳的应收票据(要先存在应收票据,才能保存单据,相当于是根据这张票据审核生成的这张收单单 ...

  2. springMvc几个常用注解

    浏览器本省就是get ,post 可以用form表单 @RequestMapping: 作用:用来映射请求的url @RequestMapping注解的多个属性是与(且)的关系,必须同时满足 位置:可 ...

  3. 苹果账号需要的邓白氏D-U-N-S编码更新信息最新方法,官方已不受理邮件

    公司从上海搬迁到深圳,公司名称相应变更,但之前注册的苹果开发者账号上的名字还是就的,尝试在后台提交更新申请,官方给了邮件,要求邮件提交证明材料,证明材料提交后,苹果又反馈和邓白氏的资料不匹配,要求先修 ...

  4. python内存分析

    安装 首先安装memory_profiler和psutil pip install memory_profiler pip install psutil 在需要分析的函数前面添加装饰器@profile ...

  5. C++中的const_cast

    开发环境 Qt Creator 4.8.2 编译器版本 MinGw 32-bit const_cast 用法: const_cast<type_id> (expression) 说明: 该 ...

  6. ps:建立规则选区

    在前面的内容中,我们初步接触了色彩调整工具中的“色相/饱和度”工具[CTRL U],现在我们可以很容易地改变图像的色相.将如下左图的色相改为-100,形成如下中图的效果.但是这样做有一个局限,那就是只 ...

  7. 反射getDeclaredFields()

    public static void main(String[] args) { // 获取所有属性值 Field[] fields = People.class.getDeclaredFields( ...

  8. super语句不必须放在方法第一行。

    class A(object): pass class B(A): def __init__(self): self.__a = "B#a" super(B, self).__in ...

  9. sys模块 json pickle模块

    # sys模块# import sys# sys.path# sys.argv# sys.exit() # 脚本退出# print('[%s]'%('#'*1))# print('[%s]'%('#' ...

  10. 对webpack的初步研究4

    Mode string module.exports = { mode: 'production' }; webpack --mode=production The following string ...