主要是构建 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. 在Eclipse-jee-neon中配置springsource-tool-suite

    今天为大家展示如何在Eclipse-jee-neon中配置spring的插件(springsource-tool-suit): 打开Eclipse,查看自己的版本. Help –> About ...

  2. ASE Alpha Sprint - backend scrum 9

    本次scrum于2019.11.14再sky garden进行,持续15分钟. 参与人: Xin Kang, Zhikai Chen, Jia Ning, Hao Wang 请假: Lihao Ran ...

  3. 二、Rabbit使用-初次测试

    RabbitMQ提供了后台管理的页面,如果想使用该页面,需要进入安装rabbitmq的安装目录,运行以下cmd命令 rabbitmq-plugins enable rabbitmq_managemen ...

  4. CentOS7 systemctl 命令

    *启动.重启.停止.重载服务 # systemctl start httpd.service # systemctl restart httpd.service # systemctl stop ht ...

  5. python常用模块学习2

    #sys模块 import sys # # print(sys.argv)#命令行参数List,第一个元素是程序本身路径 #主要用作网络请求判断 # command=sys.argv[1] # pat ...

  6. Spring Cloud Stream监听已存在的Queues/Exchanges

    环境准备 rabbitmq已运行,端口5672,控制台web端口15672,用户名密码guest/guest 引入spring cloud stream依赖 compile('org.springfr ...

  7. Codeforces 750E 线段树DP

    题意:给你一个字符串,有两种操作:1:把某个位置的字符改变.2:询问l到r的子串最少需要删除多少个字符,使得这个子串含有2017子序列,并且没有2016子序列? 思路:线段树上DP,我们设状态0, 1 ...

  8. loj6038「雅礼集训 2017 Day5」远行 树的直径+并查集+LCT

    题目传送门 https://loj.ac/problem/6038 题解 根据树的直径的两个性质: 距离树上一个点最远的点一定是任意一条直径的一个端点. 两个联通块的并的直径是各自的联通块的两条直径的 ...

  9. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  10. Java架构师/高并发/高可用/高扩展/性能优化/框架源码分析实战

    https://ke.qq.com/course/401944?taid=3389721334391320