前言【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本系列文章源码参考vue-routerv4.0.15。源码地址：https://github.com/vuejs/router阅读本文的前提是你最好了解vue-router的基本使用。如果没有使用过，可以通过vue-router官网进行学习。本文将分析RouterLink组件的实现。使用ToIndexPageRouterLinkexportconstRouterLinkImpl=/*#__PURE__*/defineComponent({name:'RouterLink',props:{//链接到目标路由to:{type:[String,Object]asPropType,required:true,},//决定是调用router.push()还是router.replace()replace:Boolean,//当链接被激活时，用来渲染a标签的类activeClass:String,//inactiveClass:String,//当链接被准确激活时，用来渲染a的类tagexactActiveClass:String,//内容不应该包裹在标签中custom:Boolean,//传递给aria-current属性的值。https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-currentariaCurrentValue:{type:StringasPropType,default:'page',},},useLink,setup(props,{slots}){//使用useLink创建路由器链接所需的一些属性和行为constlink=reactive(useLink(props))//创建路由器时传入的选项const{options}=注入（路由器密钥）！//类对象constelClass=computed(()=>({[getLinkClass(props.activeClass,options.linkActiveClass,'router-link-active')]:link.isActive,//激活时的类[getLinkClass(props.exactActiveClass,options.linkExactActiveClass,'router-link-exact-active')]:link.isExactActive,//精确激活类}))return()=>{//默认插槽constchildren=slots.default&&slots.default(link)//如果设置了props.custom，会直接显示chldren，否则需要用标签包裹返回props.custom？children:h('a',{'aria-current':link.isExactActive?props.ariaCurrentValue:null,href:link.href,onClick:link.navigate,class:elClass.value,},children)}},})exportconstRouterLink=RouterLinkImplasunknownas{new():{$props:AllowedComponentProps&ComponentCustomProps&VNodeProps&RouterLinkProps$slots:{默认值:(arg:UnwrapRef>)=>VNode[]}}useLink:typeofuseLink}
