router-view 通过响应式系统自动更新:Vue Router 将 history.current 挂载为响应式 _route,路由变化触发 updateRoute,使依赖 $route 的 router-view 重新渲染;它为函数式组件,按 matched 数组动态渲染对应组件,支持嵌套、命名视图与过渡。

router-view 不是靠轮询或手动触发更新,而是深度绑定 Vue 的响应式系统,让路由变化自动驱动视图重绘。
它依赖一个响应式的 _route 数据
Vue Router 在初始化时,会把当前路由对象挂载到根 Vue 实例的 _route 属性上,并用 Vue.util.defineReactive 将其转为响应式:
- 这个
_route实际指向history.current(比如 HashHistory 或 HTML5History 的当前 route 对象) - 只要 history 内部调用
updateRoute更新了current,_route就会触发 getter/setter,通知所有依赖它的 watcher -
router-view组件的 render 函数中读取this.$route(本质就是访问this._router.app._route),因此天然成为该响应式数据的依赖者
它是一个函数式组件,靠 render 函数动态决定渲染内容
router-view 没有模板,也没有 data 或 methods,只靠一个 render(h) 函数完成全部逻辑:
- 从父组件向上查找最近的
$route和$router(通常来自根实例) - 根据当前
$route.matched数组,取出对应层级的组件记录(支持嵌套路由) - 若匹配到组件,就用
h(component, data, children)渲染;否则渲染空节点 - 它还会处理
name属性(命名视图)、keep-alive缓存标识、过渡动画钩子等细节
它不直接监听 URL,而是被动响应路由状态变更
URL 变化本身由 History 实例管理(hashchange / popstate),router-view 完全不接触事件监听:
- HashHistory 或 HTML5History 在地址变化后,调用
transitionTo执行匹配 -
transitionTo最终调用updateRoute,更新history.current - 由于
_route是响应式,这一步就足以触发router-view重新执行render函数 - 整个过程没有强制刷新,没有 DOM 重建开销,只有必要组件的差异更新
它支持多层嵌套,靠父子 router-view 协同定位
每个 router-view 都知道自己在 $route.matched 中的层级位置:
- 根
router-view取matched[0]对应的组件 - 子路由下的
router-view通过parent.$route和自身所在位置,计算出应取matched[i] - 命名视图则通过
$route.matched[depth].components[name]精确匹配 - 这种设计让嵌套路由的组件树与路由配置结构严格对齐

















