本文深入解析Vue Router中router-view和router-link的实现原理。router-view通过递归查找父组件的$route匹配记录，动态渲染对应组件；router-link则封装HTML标签，拦截点击事件并调用$router.push实现路由跳转。理解其源码有助于掌握Vue路由机制。
Vue Router 组件使用概述
在Vue应用中，路由系统的核心在于组件的渲染与导航。首先介绍基本的使用方式，开发者需要在模板中引入路由相关的组件，以便实现页面内容的切换和链接跳转。
<div id="app">
<router-link to='home'>首页</router-link>
<router-link to='about'>关于</router-link>
<router-view a=1><router-view/>
</div>
router-view 渲染原理
router-view组件负责根据当前路由匹配结果渲染对应的组件。其核心逻辑在于通过遍历父组件链，找到与当前路由层级匹配的组件记录，并动态创建虚拟DOM节点进行渲染。该组件通常被定义为函数式组件，以减轻性能开销，适用于仅需展示内容的场景。
export default {
//函数式组件没有this 不能new 没有双向数据绑定，通常用的比较少，比较适用于展示详情页因为详情页只展示不进行修改等操作，函数式组件比有状态的组件更加轻量级。
functional:true,
render(h,{parent,data}){
parent表示的父组件 app
data 是行间属性(上面代码a=1) 也可以使用prop传递
let route = parent.$route;
let depth = 0;
data.routerView = true;
while(parent){
//$vnode指的是虚拟dom 如果app上有虚拟dom并且这个虚拟dom上的routerView为true
if (parent.$vnode && parent.$vnode.data.routerView){
depth++;
}
parent = parent.$parent;
}
let record = route.matched[depth];
if(!record){
return h();
}
return h(record.component, data);
}
}
router-link 跳转机制
router-link组件用于生成导航链接。它接收to属性指定目标路径，并支持通过tag属性自定义渲染的HTML标签（默认为a标签）。在渲染时，它监听点击事件，阻止默认行为，并调用this.$router.push方法触发路由跳转，从而更新视图。
export default {
props:{
to:{
type:String,
required:true
},
tag:{
type:String
}
},
render(h){
let tag = this.tag || 'a';
let handler = ()=>{
this.$router.push(this.to);
}
return <tag onClick={handler}>{this.$slots.default}</tag>
}
}
通过对router-view和router-link源码的分析，可以清晰理解Vue Router的工作机制。router-view负责内容的动态渲染，而router-link负责导航行为的触发。掌握这些原理有助于在实际开发中更灵活地处理路由相关需求。