前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载router-link是 vue-routerVue 2 官方路由中用于在启用路由的应用里触发用户导航的核心声明式组件它以toprop 指定目标位置默认渲染为带正确href的a标签并能在目标路由激活时自动为链接添加 active CSS 类。阅读本文后你将掌握router-link全部 props 的用法与默认值、active 类“包含匹配”与“精确匹配”的差异以及其在 src/components/link.js 中的底层实现原理如router.resolve、isIncludedRoute、guardEvent。router-link是什么在基于 vue-router 的应用中页面间跳转最常见的写法不是手写a href...而是使用router-link组件。它负责三件核心事情根据toprop 解析出真实的目标地址并渲染为带有正确href的a标签拦截点击事件并交给路由内部处理避免浏览器整页刷新在目标路由处于激活状态时自动为链接应用 active CSS 类方便开发者做导航高亮。默认情况下它渲染为a标签但可以通过tagprop 改造成任意标签同时仍然监听点击事件完成导航。为什么用router-link而不是硬编码a href...原文档docs-gitbook/kr/api/router-link.md给出了三条理由这也是该项目官方推荐使用router-link的根本原因跨模式行为一致无论路由器工作在 HTML5 History 模式还是 Hash 模式router-link都以相同方式工作。当你决定切换模式或路由器因 IE9 等环境自动回退到 Hash 模式时模板代码完全无需改动。阻止浏览器整页刷新在 HTML5 History 模式下router-link会拦截点击事件避免浏览器执行默认行为导致页面重新加载。这一点在源码guardEvent中有完整的实现见下文“点击拦截的实现”一节它通过e.preventDefault()阻断默认跳转再把导航交给路由内部的push/replace流程。自动处理base路径在 HTML5 History 模式下配置了base选项时toprop 中不需要重复包含 base 前缀路由会替你处理。Props 完整说明以下 props 均继承自原文档并补充了本仓库 types/router.d.ts 与 src/components/link.js 中的类型约束与实现细节。to类型string | Location必填表示链接的目标路由。点击时to的值会被内部传给router.push()因此它既可以是字符串也可以是位置描述符Location对象!-- 字面量字符串 -- router-link tohomeHome/router-link !-- 渲染结果 -- a hrefhomeHome/a !-- 使用 v-bind 绑定表达式 -- router-link v-bind:tohomeHome/router-link !-- 省略 v-bind与绑定其他 prop 写法一致 -- router-link :tohomeHome/router-link !-- 与上面等价的对象写法 -- router-link :to{ path: home }Home/router-link !-- 具名路由 -- router-link :to{ name: user, params: { userId: 123 }}User/router-link !-- 带查询参数将解析为 /register?planprivate -- router-link :to{ path: register, query: { plan: private }}Register/router-link从源码看to的类型校验为[String, Object]见 src/components/link.js对象形式的{ path }、{ name, params }、{ path, query }都是合法的 Location 描述符。replace类型boolean默认值false设置replace后点击时调用的是router.replace()而不是router.push()因此导航不会产生新的历史记录浏览器的“后退”按钮无法回到该页面router-link :to{ path: /abc} replace/router-link源码中对应的分支在 src/components/link.jshandler内根据this.replace决定调用router.replace(location, noop)还是router.push(location, noop)。append类型boolean默认值false设置append后相对路径会被始终追加到当前路径之后。例如当前在/a点击相对链接b不加append会到达/b加了append则到达/a/brouter-link :to{ path: relative/path} append/router-link实现上append会作为第三个参数传给router.resolve(this.to, current, this.append)见 src/components/link.js由路由解析逻辑决定相对路径的拼接方式。tag类型string默认值a有时我们希望router-link渲染成li等其他标签此时用tag指定要渲染的标签组件仍会持续监听点击事件来完成导航router-link to/foo taglifoo/router-link !-- 渲染结果 -- lifoo/li从源码看当tag不是a时组件会在插槽内递归查找第一个a子元素把href和事件监听挂到该a上如果找不到a子元素则把监听器挂到tag指定的元素自身上见 src/components/link.js。注意本仓库版本 3.6.5见 package.json会在开发环境对tag与eventprops 给出弃用警告提示它们在 Vue Router 4 中已被移除建议改用 v-slot API。active-class类型string默认值router-link-active配置链接处于激活状态时应用的 CSS 类名。默认值也可以通过路由构造选项linkActiveClass进行全局配置。exact类型boolean默认值false默认的激活类匹配行为是包含匹配inclusive match。例如router-link to/a只要当前路径以/a或/a/开头就会应用激活类。由此带来的一个后果是router-link to/会对所有路由都保持激活状态如果要强制链接进入“精确匹配模式”请使用exact!-- 此链接仅在路径为 / 时激活 -- router-link to/ exact包含匹配与精确匹配的判定分别由 src/util/route.js 中的isIncludedRoute与isSameRoute实现详见下文“激活类的判定原理”。event版本要求2.1.0类型string | Arraystring默认值click指定哪些事件可以触发链接导航可以是单个事件名也可以是事件名数组。源码中的类型校验为[String, Array]见 src/components/link.js事件绑定逻辑见 src/components/link.js如果是数组则逐个on[e] handler否则on[this.event] handler。exact-active-class版本要求2.5.0类型string默认值router-link-exact-active指定链接在“精确匹配”状态下应用 CSS 类。默认值可以通过路由构造选项linkExactActiveClass全局配置。本仓库新增的扩展 props除原文档列出的 props 外本仓库版本还提供了以下扩展定义于 src/components/link.js 与 types/router.d.tsexact-pathboolean默认false。仅用 URL 的path部分做精确匹配忽略query和hash。例如router-link to/search exact-path在/search?page2或/search#filters下同样激活。对应类型声明见 types/router.d.ts。exact-path-active-classstring默认router-link-exact-path-active可通过路由构造选项linkExactPathActiveClass全局配置。aria-current-valuepage | step | location | date | time | true | false默认page。在链接精确激活时设置到aria-current属性上默认值page通常是最佳选择类型定义见 types/router.d.ts。customboolean默认false。配合 v-slot API 使用取消 Vue Router 4 中默认包裹a的迁移警告。v-slot 作用域插槽 API源码 src/components/link.js 还实现了作用域插槽默认插槽会收到{ href, route, navigate, isActive, isExactActive }对象允许完全自定义渲染内容router-link :to{ name: user, params: { userId: 123 }} custom v-slot{ href, route, navigate, isActive } a :hrefhref clicknavigate :class{ active: isActive }{{ route.params.userId }}/a /router-link将 active 类应用到外部元素有时我们希望激活类出现在a自身之外的容器元素上。做法是让router-link渲染外层元素并在内部手写原生arouter-link tagli to/foo a/foo/a /router-link此时a才是真正的链接会获得正确的href而激活类会应用在外层的li上。这个行为与源码中“tag非a时查找内部首个a元素并挂接 href 与事件”的逻辑完全一致src/components/link.js。仓库自带的 examples/active-links/app.js 中也包含同款示例router-link tagli to/abouta/about (active class on outer element)/a/router-link。源码深挖激活类的判定原理激活类的计算集中在 src/components/link.js核心逻辑如下通过router.resolve(this.to, current, this.append)得到location、route和hrefsrc/components/link.js读取全局配置router.options.linkActiveClass与linkExactActiveClass若未配置则回退到router-link-active/router-link-exact-active组件自身的activeClass/exactActiveClassprop 优先级最高src/components/link.js处理重定向若目标路由存在redirectedFrom会先基于它构造对比目标保证重定向前的链接也能正确高亮src/components/link.js精确激活类exactActiveClass由isSameRoute(current, compareTarget, this.exactPath)决定非精确的包含类activeClass在exact或exactPath开启时直接取精确匹配结果否则由isIncludedRoute(current, compareTarget)决定src/components/link.js。两个判定函数定义在 src/util/route.jsisSameRoute比较 path忽略结尾斜杠差异、hash 与 query含嵌套对象比较onlyPath为真时只比较 pathisIncludedRoute判断当前路径是否以目标路径为前缀同样先规范化结尾斜杠同时要求 hash 与 query 满足包含关系——这正是文档所说的“包含匹配”。点击拦截的实现guardEvent当tag为a或使用默认事件时点击处理由guardEvent完成src/components/link.js。它会主动放行以下场景其余情况一律preventDefault()并返回true交给路由导航按住修饰键metaKey、altKey、ctrlKey、shiftKey时不拦截——保留浏览器在新标签页打开链接的能力事件已被preventDefault()调用过时不重复处理非左键点击如右键不处理target_blank的链接不拦截。拦截成功后handler 根据replace调用router.replace或router.pushsrc/components/link.js从而完成无刷新的 SPA 导航。全局配置链接激活类active-class与exact-active-class的默认值都可以在创建路由时全局覆盖避免每个链接重复书写const router new VueRouter({ mode: history, linkActiveClass: nav-item-active, linkExactActiveClass: nav-item-exact-active, routes: [ { path: /, component: Home }, { path: /about, component: About } ] })对应的选项类型声明位于 types/router.d.tslinkActiveClass与linkExactActiveClass均为可选string未提供时默认应用router-link-active/router-link-exact-active。源码中读取这两个全局选项的位置在 src/components/link.js。小结router-link是 vue-router 面向模板的导航入口其价值在于跨 History / Hash 模式行为一致、拦截点击避免整页刷新、自动兼容base配置并通过to/replace/append/tag/exact/active-class/exact-active-class/event等 props 覆盖了绝大多数导航与高亮场景。想要深入验证文中行为可运行仓库示例npm run dev后访问 active-links 页面配置见 examples/server.js或阅读 examples/active-links/app.js 中覆盖了包含匹配、精确匹配、重定向、命名路由、query/hash 等边界情况的完整示例。赞分享前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载相关推荐Cordis Loader深度教程YAML声明式插件加载的艺术Cordis Loader深度教程YAML声明式插件加载的艺术 Cordis Loader 是 Cordis 框架的官方插件加载器它让 YAML 声明式插件前端路由TanStack Router Link 组件详解类型化 Props、激活态判定与预加载的源码级解析TanStack Router Link 组件详解类型化 Props、激活态判定与预加载的源码级解析 本篇基于 TanStack Router本仓库的官方前端路由SSR如何用CSV.swift轻松解析CSV文件5分钟快速上手教程如何用CSV.swift轻松解析CSV文件5分钟快速上手教程 CSV.swift是一款用Swift编写的高效CSV文件读写库能帮助开发者轻松处理逗号分隔值文前端路由上一篇Amulet Map Editor打破Minecraft版本壁垒的终极创作工具箱下一篇FastJSON多版本共存ClassLoader隔离解决依赖冲突问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考