前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载本篇指南以 vue-routerVue 2 官方路由的入门文档为核心一步步带你完成从零搭建单页应用SPA的完整流程引入依赖、定义路由组件、创建路由实例、挂载根实例并理解router-link、router-view、this.$router与this.$route四大核心概念。读完后你将能独立写出一个可运行的组件 ↔ 路由映射应用并理解其底层工作原理为后续学习嵌套路由、动态路由匹配、导航守卫等进阶能力打下基础。为什么用 Vue Vue Router 就能做单页应用创建单页应用Single Page Application的思路是整个页面只加载一次后续页面跳转不再触发浏览器整页刷新而是由 JavaScript 动态替换页面中的局部内容。在 Vue 的世界里页面本身就是由组件构成的所以跳转本质上就是在同一个div idapp内根据当前 URL 换掉渲染的组件。Vue Router 恰好就是负责这层URL ↔ 组件映射关系的官方路由库本仓库package.json中描述为Official router for Vue.js 2当前版本为 3.6.5。你只需要做三件事把组件定义出来Foo、Bar……用routes数组把路径和组件一一对应起来创建VueRouter实例并注入 Vue 根实例剩下的渲染交给路由完成。源码层面VueRouter类的构造函数src/router.js接收options后会用createMatcher(options.routes || [], this)src/create-matcher.js把routes编译成一张路径/名称匹配表根实例beforeCreate时调用this._router.init(this)见 src/install.js完成首次路由过渡。对使用者来说这些细节都可以先不关心按下面的步骤即可跑起来。说明本文示例按官方入门文档采用 ES2015 语法书写同时示例使用的是 Vue 的完整版包含模板编译器以便直接解析template字符串。若使用运行时构建runtime-only则需要配合单文件组件.vue或渲染函数。本仓库示例如 examples/basic/app.js正是用字符串模板 $mount(#app)的方式运行的。第一步引入 Vue 与 Vue Router方式一CDN 引入最简单的演示方式在 HTML 中按顺序引入两个脚本vue-router必须在vue之后加载script srchttps://unpkg.com/vue/dist/vue.js/script script srchttps://unpkg.com/vue-router/dist/vue-router.js/script使用全局script标签时vue-router会自动完成安装VueRouter.install被调用见 src/router.js 中window.Vue存在时自动window.Vue.use(VueRouter)的逻辑无需手动调用Vue.use()。unpkg.com提供基于 npm 的 CDN 链接上面的地址始终指向 npm 上的最新版本也可以锁定具体版本例如https://unpkg.com/vue-router3.6.5/dist/vue-router.js。方式二npm 安装 模块系统npm install vue-router通过模块系统如 vue-cli 生成的项目使用时必须显式调用Vue.use(VueRouter)完成插件安装import Vue from vue import VueRouter from vue-router Vue.use(VueRouter)Vue.use()会触发 src/install.js 中的install函数它做了三件关键的事通过Vue.mixin注入beforeCreate钩子使每个组件都能访问路由实例与当前路由在Vue.prototype上定义$router和$route两个响应式属性后面会讲全局注册router-link与router-view两个组件Vue.component(RouterView, View)/Vue.component(RouterLink, Link)。如果想使用仓库最新的开发构建可以克隆本仓库到node_modules/vue-router后自行编译详见 docs-gitbook/fr/installation.mdgit clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build第二步编写 HTML 骨架——两个魔法组件在页面中放置#app容器里面只放两个 Vue Router 提供的全局组件div idapp h1Bonjour lapplication !/h1 p !-- 使用 router-link 组件进行导航 -- !-- 通过向 to prop 传入目标路径来指定链接 -- !-- router-link 默认会被渲染为 a 标签 -- router-link to/fooAller à Foo/router-link router-link to/barAller à Bar/router-link /p !-- router-view 出口 -- !-- 与当前路由匹配的组件会被渲染在这里 -- router-view/router-view /div这两个组件是整个 SPA 的骨架职责分工明确router-link导航链接。指定toprop 后点击它会触发路由跳转而不是浏览器的整页刷新。默认渲染为a标签href由路由自动计算。router-view渲染出口。当前路由匹配到的组件会被渲染在这个位置。其实现src/components/view.js是一个函数式组件通过parent.$route获取当前路由再按嵌套深度取route.matched[depth]对应的组件进行渲染没有匹配时渲染空节点h()。第三步编写 JavaScript——五步完成路由装配官方入门示例把整个装配过程拆成编号步骤逐段来看// 0. 如果使用模块系统例如通过 vue-cli需要先导入 Vue 和 Vue Router并调用 Vue.use(VueRouter)。 // 使用全局 script 标签时此步可省略见上文 // 1. 定义路由组件。 // 这些组件也可以从其他文件导入。 const Foo { template: divfoo/div } const Bar { template: divbar/div } // 2. 定义路由。 // 每条路由都必须对应一个组件。「组件」可以是 // 通过 Vue.extend() 创建的真实组件也可以只是一个 // 选项对象options object。 // 嵌套路由我们稍后再讨论。 const routes [ { path: /foo, component: Foo }, { path: /bar, component: Bar } ] // 3. 创建路由实例并传入 routes 选项。 // 还可以传入其他选项但这里先保持简单。 const router new VueRouter({ routes // 等价于 routes: routes }) // 4.官方示例中省略了此编号保持原注释顺序 // 5. 创建并挂载 Vue 根实例。 // 确保通过 router 选项注入路由这样 // 整个应用才能感知到路由变化。 const app new Vue({ router }).$mount(#app) // 应用已经跑起来了每一步在源码中的对应第 1 步路由组件可以是Vue.extend()构造的组件也可以直接是包含template的普通选项对象如上例。官方注释特别强调这一点因为路由配置非常灵活。第 2 步routes数组中的每一条记录都会在createRouteMap见 src/create-route-map.js中被编译为路由记录route record并建立pathMap路径 → 记录与nameMap命名路由 → 记录两张查找表供后续match()使用。第 3 步new VueRouter({ routes })内部src/router.js还会根据options.mode选择历史实现默认hash模式使用HashHistoryhistory模式使用HTML5History非浏览器环境自动降级为abstract模式。入门阶段不传mode即可使用默认的 hash 模式URL 形如/#/foo。第 5 步根实例的router选项是关键。在 src/install.js 的beforeCreate钩子中检测到this.$options.router存在时会把它保存为_routerRoot并执行this._router.init(this)同时用Vue.util.defineReactive把_route定义为响应式属性——这正是URL 变化 →router-view自动更新的响应式基础。这个完整流程与仓库示例完全一致可对照 examples/basic/app.js使用mode: history的完整版示例以及其页面模板 examples/basic/index.html 查看真实可运行代码。第四步在任何组件中访问路由——this.$router与this.$route注入路由之后任意组件内都可以通过两个实例属性访问路由能力this.$router路由实例等同于new VueRouter(...)得到的router对象用于执行导航push、replace、go等this.$route当前激活的路由信息对象包含path、params、query、hash、fullPath、matched、name等字段用于读取当前状态。官方入门文档给出的组件示例// Home.vue export default { computed: { username () { // 稍后会看到 params 代表什么动态路由参数 return this.$route.params.username } }, methods: { goBack () { window.history.length 1 ? this.$router.go(-1) : this.$router.push(/) } } }这个例子展示了两种典型用法读取this.$route.params.username读取当前路由的动态参数与/user/:username这类动态路由配合使用详见 docs-gitbook/fr/essentials/dynamic-matching.md导航goBack()根据window.history.length判断有历史记录就this.$router.go(-1)后退一步否则this.$router.push(/)回首页。为什么文档中有时直接用router有时用this.$router官方文档在很多地方会直接使用router实例请记住this.$router与router是同一个东西。之所以推荐在组件里用this.$router是为了避免在每个需要路由的组件文件里手动 import 路由实例——通过 src/install.js 在Vue.prototype上定义的 getter$router会向上查找到_routerRoot._router$route则返回_routerRoot._route任何组件包括深层子组件都能直接拿到。$route是响应式的由于根实例的_route被defineReactive定义当路由变化时src/router.js 中history.listen会逐个更新所有 app 的_route所有依赖$route的组件如computed: { username }都会自动重新计算。这也是单页、无刷新、数据自动更新体验的来源。第五步认识默认激活样式.router-link-active官方入门文档最后强调了一个很容易被忽略的细节当router-link的目标路由与当前路由匹配时它会自动获得.router-link-active类。也就是说导航菜单高亮不需要你手动维护当前是哪个链接Vue Router 会自动加上这个类配合一行 CSS 即可实现当前页高亮效果。其实现位于 src/components/link.jsRouterLink渲染时通过router.resolve()得到目标路由然后计算两个类router-link-active包含式匹配——当前路由只要包含/前缀匹配目标路由就激活例如目标/foo当前/foo/bar也算激活router-link-exact-active精确匹配——仅在当前路由与目标路由完全相同时激活Vue Router 2.5.0 新增。两个类的默认名称都可以在路由选项中全局覆盖linkActiveClass/linkExactActiveClass也可以在单个链接上用active-class/exact-active-classprop 覆盖。关于router-link的完整 prop 说明to、replace、append、tag、exact、event等可参考 docs-gitbook/fr/api/router-link.md更底层的渲染与点击拦截逻辑见 src/components/link.js。结合源码看一次点击导航的完整链路把上面的知识串起来当用户点击router-link to/bar时实际发生的调用链是RouterLink的handlersrc/components/link.js通过guardEvent拦截点击拦截ctrl/meta/shift/alt组合键、右键、target_blank等情况避免误导航然后调用router.push(location)pushsrc/router.js委托给当前history实现hash 模式下更新 URL 的 hash 部分history.transitionTo执行路由过渡最终通过createMatcher的match()src/create-matcher.js按pathMap匹配到/bar对应的组件记录history.listen回调更新根实例_routesrc/router.js响应式系统通知router-viewsrc/components/view.js重新渲染把Bar组件渲染到出口位置。至此一次点击链接 → URL 变化 → 组件切换的 SPA 导航闭环就完成了。仓库中的 e2e 测试如 test/e2e/specs/basic.js对这类交互有完整断言可以作为行为参考。下一步往哪走入门文档只是一个起点。围绕本仓库你可以继续深入动态路由匹配/user/:id这类带参数的路由对应$route.params的使用docs-gitbook/fr/essentials/dynamic-matching.md嵌套路由路由与组件层级嵌套配合多级router-viewdocs-gitbook/fr/essentials/nested-routes.md编程式导航router.push/router.replace/router.go的完整用法docs-gitbook/fr/essentials/navigation.mdHistory 模式去掉 URL 中的#需要服务端配合docs-gitbook/fr/essentials/history-mode.md导航守卫在导航前后拦截与校验docs-gitbook/fr/advanced/navigation-guards.md。仓库的 examples 目录还提供了几十个可直接运行的示例入口为 examples/server.jsnpm run dev即可启动其中 examples/basic 就是本入门指南的完整可运行版本。赞分享前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载相关推荐Vue Router 2 快速上手用 vue-router 构建你的第一个 Vue.js 单页应用Vue Router 2 快速上手用 vue router 构建你的第一个 Vue.js 单页应用 本文是 Vue Router 官方文档 Primeros前端路由Rocket.Chat 的 Meteor 现代构建栈Modern Build Stack文件监听原理、Watchman 冲突排查与 TurboRepo 子进程问题全解析Rocket.Chat 的 Meteor 现代构建栈Modern Build Stack文件监听原理、Watchman 冲突排查与 TurboRepo 子前端路由RPCS3汉化教程3步把PS3模拟器界面改成中文乱码问题一次讲清RPCS3汉化教程3步把PS3模拟器界面改成中文乱码问题一次讲清 RPCS3 是一款在电脑上运行 PS3 游戏的模拟器官方界面默认是英文。这篇教程带你把它前端路由上一篇LittleFS软尾指针与硬尾指针嵌入式文件系统的核心机制解析下一篇Platypus把 Shell 和 Python 脚本打包成能双击启动的 macOS 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考