主要是构建 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. .NET File 多图上传

    HTML代码: <div> <div> <input type="file" style="display:none" id=&q ...

  2. Monument Tour(以前月赛卡住的签到题,今天突然想起拿出来补一补

    https://oj.neu.edu.cn/problem/1501 题意:给你矩阵大小和上面的一些点,要你从左到右从一条主路穿过,并且访问这些点,问最短总路线长度. 思路:一开始对于一个点我只算了一 ...

  3. whetstone

    https://www.cnblogs.com/findumars/p/4173040.html 下载源码:http://www.netlib.org/benchmark/whetstone.c ar ...

  4. [MethodImpl(MethodImplOptions.Synchronized)]、lock(this)与lock(typeof(...))

    对于稍微有点经验的.NET开发人员来说,倘若被问及如何保持线程同步,我想很多人都能说好好几种.在众多的线程同步的可选方式中,加锁无疑是最为常用的.如果仅仅是基于方法级别的线程同步,使用System.R ...

  5. 一个奇怪的问题:Last_Errno: 1264 Error 'Out of range value for column 0x322E36343030

    场景环境: 1. 主从都是:Server version: 5.7.16-log MySQL Community Server (GPL) 2.操作系统:CentOS release 6.7 (Fin ...

  6. Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现

    Vue 中我们是通过 $mount 实例方法去挂载 vm 的 $mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher ...

  7. mona!mona!mona!

    $ PS: $ 关于\(mona\) 是只很棒的猫啦!想知道的可以自己去看\(persona5\)的游戏流程或者动画版啦. \(PPS:\) 补充一下设定啊,\(mona\)是摩尔加纳(原名)的代号啦 ...

  8. CF1090J Two Prefixes

    神仙题++ 还是在某校梁大讲的题qaq 我们考虑容斥 也就是本质不同字串=全部-重复的 我们只需要求重复的即可 考虑相同的s=ab 我们用长度最长的a作为代表串 如果存在一个a'b'且|a'|> ...

  9. idhttp.get返回403错误解决办法

    在GET之前,先指定UserAgent参数IdHTTP1.Request.UserAgent := 'Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; Ma ...

  10. Docker Toolbox 学习教程【转载】

    最近在研究虚拟化,容器和大数据,所以从Docker入手,下面介绍一下在Windows下怎么玩转Docker.Docker本身在Windows下有两个软件,一个就是Docker,另一个是Docker T ...