主要是构建 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. Linux时间命令date

    date:打印当前时间 date "+定制信息":自定义格式打印时间 - date "+%H":打印当前时间的小时数 - date "+%H%M%S& ...

  2. Python之路-条件控制&循环语句&列表推导式&常用函数

    一.什么是条件控制语句 条件控制语句,也可以称之为判断语句,通过一条或多条的执行结果来决定接下来要执行的代码块. 二.if语句 if语句是用来进行判断的,最简答的if语句只有一个判断一个操作. 语法: ...

  3. document.body.scrollTop值为0的解决方法[转]

    做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,       window.onscroll=function () {          ...

  4. ASPOSE的示例下载地址

    ftp://112.124.7.170/ASPOSE/Aspose.Words_16.3.0.zip http://blog.163.com/haolongqin@126/blog/static/10 ...

  5. LA 3263 That Nice Euler Circuit(欧拉定理)

    That Nice Euler Circuit Little Joey invented a scrabble machine that he called Euler, after the grea ...

  6. APP稳定性测试-monkey执行

    Monkey命令行可用的全部选项 *示例 : adb shell monkey -p cn.lejiayuan.alpha --pct-touch 30 --pct-motion 15 --pct-t ...

  7. http各个状态码的含义

    http各个状态码的含义:由三位数字组成,第一位定义了状态码的类型 常见状态码及解决方法 404:找不到,地址错误 500:逻辑错误 400:一般是入参不匹配 504:超时 2开头:(请求成功)表示成 ...

  8. 使用getchar和putchar输入输出单个字符

    getchar()和putchar()只能用于输入输出单个字符,而不能字符串. #include<iostream> using namespace std; int main(){ ch ...

  9. Xcode出现报错,但是没有给出详细信息,可以看这里

    Xcode出现报错,"Xcode build:clang: error: linker command failed with exit code 1 (use -v to..." ...

  10. spring boot和邮件服务

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址