Vue Router 3 入门实战：从零搭建 Vue 2 单页应用的路由系统

前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载本指南以 vue-routerVue 2 官方路由的入门文档为核心讲解如何将组件与路由一一映射、通过router-link与router-view完成页面导航与渲染并基于本仓库源码版本 3.6.5见 package.json深入剖析Vue.use(VueRouter)的安装机制、this.$router/this.$route的注入原理与.router-link-active激活类名的判定逻辑。读完本文你将能够独立完成一个 SPA 的最小路由配置并理解其背后的实现细节。核心思想组件与路由的映射使用 Vue.js 和 vue-router 构建单页应用SPA非常直观你只需要把组件Component和路由Route一一映射然后告诉 vue-router 在哪里渲染它们即可。整个过程中应用的其余部分仍然是普通的 Vue 组件结构路由只是把URL 变化这一事件翻译成切换渲染哪个组件。这一设计在源码中体现为两个核心构建块分别由两个全局组件承载router-link用于创建导航链接替代原生a标签定义见 src/components/link.jsrouter-view路由出口匹配到的组件会渲染在这里定义见 src/components/view.js。官方入门文档强调了两点前置约定指南中的代码示例均使用 ES2015 语法箭头函数、const、对象简写等所有示例使用 Vue 的完整版本含模板编译器以便直接在浏览器中解析模板字符串。HTML 骨架引入脚本并声明路由出口在一个最简页面中通过 CDN 引入 Vue 与 vue-router 的完整构建然后声明导航链接和路由出口script srchttps://unpkg.com/vue/dist/vue.js/script script srchttps://unpkg.com/vue-router/dist/vue-router.js/script div idapp h1Hello App!/h1 p !-- 使用 router-link 组件进行导航 -- !-- 通过 to 属性指定链接目标 -- !-- 默认情况下 router-link 会被渲染为 a 标签 -- router-link to/fooGo to Foo/router-link router-link to/barGo to Bar/router-link /p !-- 路由出口 -- !-- 与路由匹配到的组件将在这里被渲染 -- router-view/router-view /div代码中的注释点明了两个约定router-link的to属性用于指定目标路由默认渲染为a标签tag属性默认值为a见 src/components/link.js。仓库中的 examples/basic/index.html 展示了实际示例页面的骨架仅有一个div idapp/div挂载点配合打包脚本注入共享依赖应用逻辑全部由 JavaScript 完成。对于不使用构建工具的读者上面的 CDN 写法可以直接在单个 HTML 文件中运行。JavaScript 逻辑四步完成路由配置官方入门文档给出了创建路由器的四步流程这也是 vue-router 使用中最核心的骨架// 0. 如果使用模块系统例如通过 vue-cli 创建的项目 // 需要导入 Vue 和 VueRouter并调用 Vue.use(VueRouter) // 1. 定义路由组件 // 也可以从其他文件导入 const Foo { template: divfoo/div } const Bar { template: divbar/div } // 2. 定义路由 // 每条路由都需要映射到一个组件 // 组件可以是实际调用 Vue.extend() 得到的结果 // 也可以是普通的组件选项对象 // 嵌套路由会在后续章节讲解 const routes [ { path: /foo, component: Foo }, { path: /bar, component: Bar } ] // 3. 创建 router 实例传入路由配置 // 这里可以指定更多选项本例保持简洁 const router new VueRouter({ routes // 相当于 routes: routes 的简写 }) // 4. 创建根实例并挂载 // 务必把 router 注入根实例让整个应用都能感知到路由 const app new Vue({ router }).$mount(#app) // 现在可以开始了第 0 步Vue.use(VueRouter) 到底做了什么当使用模块系统如 vue-cli 项目时第一步是调用Vue.use(VueRouter)安装插件。在 src/install.js 中可以找到安装的完整逻辑它主要完成三件事注册两个全局组件Vue.component(RouterView, View)与Vue.component(RouterLink, Link)见 src/install.js这就是模板中能直接使用router-view和router-link的原因注入实例属性通过Object.defineProperty(Vue.prototype, $router, ...)和Object.defineProperty(Vue.prototype, $route, ...)为所有组件实例提供$router与$route访问器见 src/install.js混入生命周期钩子通过Vue.mixin在beforeCreate中初始化路由找到根实例上的router选项并调用_router.init并在destroyed中注销实例同时为beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate三个路由守卫钩子复用 Vue 自身的created合并策略见 src/install.js 与 src/install.js。这一行代码是整个 vue-router 与 Vue 深度集成的起点。路由映射的本质routes数组中的每一项是一个路由记录对象。最简形式只有path与component两个字段component可以是Vue.extend()的结果也可以是组件选项对象。仓库中的 examples/route-matching/app.js 展示了几种常见的path写法可帮助理解匹配规则其匹配引擎为path-to-regexp与 Express 一致const router new VueRouter({ mode: history, base: __dirname, routes: [ { path: / }, // 参数用冒号 : 表示 { path: /params/:foo/:bar }, // 参数后可加 ? 使其可选 { path: /optional-params/:foo? }, // 参数后可跟括号包裹的正则例如 :id 必须全为数字 { path: /params-with-regex/:id(\\d) }, // 星号可匹配任意内容 { path: /asterisk/* }, // 用括号包裹部分路径并加 ? 使其可选 { path: /optional-group/(foo/)?bar } ] })这种路径即契约的设计使得页面结构与 URL 结构天然对齐也便于后续引入动态路由匹配见 docs-gitbook/ja/essentials/dynamic-matching.md与嵌套路由见 docs-gitbook/ja/essentials/nested-routes.md。挂载点与渲染出口根实例通过new Vue({ router }).$mount(#app)挂载$mount指定挂载的 DOM 节点。官方入门文档要求务必把 router 注入根实例其原因在 src/install.js 中可见只有根实例携带router选项时混入的beforeCreate钩子才会执行this._router.init(this)进而让整个组件树共享同一个路由实例。匹配到的组件最终渲染在router-view处。从 src/components/view.js 的实现看RouterView是一个函数式组件它根据当前路由的route.matched[depth]找到对应组件并渲染见 src/components/view.jsdepth会随嵌套层级递增见 src/components/view.js这正是嵌套路由能够逐层渲染的原理。组件内访问路由$router 与 $route将 router 注入根实例后任意组件内部都可以通过两个实例属性访问路由this.$router路由器实例负责执行导航操作push、replace、go等this.$route当前激活的路由对象包含path、params、query、hash、matched等信息。官方入门文档给出的典型用法如下// Home.vue export default { computed: { username () { // 这里会输出 params 中的 username return this.$route.params.username } }, methods: { goBack () { window.history.length 1 ? this.$router.go(-1) : this.$router.push(/) } } }goBack方法展示了导航的降级策略优先利用浏览器历史回退go(-1)当没有历史可回退时则直接push(/)回到首页。为什么不直接 import router文档中特别强调在整篇文档里直接使用router实例与使用this.$router是完全等价的。之所以推荐this.$router是因为你不必在每个需要路由操作的组件中手动导入 router——插件安装时已把路由注入到原型链上组件天然可用。这一结论在源码中有直接依据src/install.js 中$router访问器返回this._routerRoot._router其中_routerRoot是组件树中携带router选项的根实例见 src/install.js。因此this.$router与根实例的router始终指向同一个对象二者完全等价。响应式原理简述$route之所以能随路由切换自动更新源于 src/install.js 中的一行关键代码Vue.util.defineReactive(this, _route, this._router.history.current)。它把当前路由对象定义为响应式数据当路由确认切换后_route被更新依赖它的组件包括router-view就会自动重新渲染。这解释了URL 改变 → 组件切换这一链路无需任何手动事件订阅的原因。导航链接的激活状态.router-link-active官方入门文档在结尾提醒读者注意router-link会在目标路由匹配时自动添加.router-link-active类。这一行为在 src/components/link.js 中有完整实现const globalActiveClass router.options.linkActiveClass const globalExactActiveClass router.options.linkExactActiveClass const activeClassFallback globalActiveClass null ? router-link-active : globalActiveClass const exactActiveClassFallback globalExactActiveClass null ? router-link-exact-active : globalExactActiveClass几个关键细节默认类名router-link-active非精确匹配与router-link-exact-active精确匹配均可在创建路由时通过linkActiveClass/linkExactActiveClass全局覆盖也可以在router-link上通过activeClass/exactActiveClass属性局部覆盖见 src/components/link.js匹配规则非精确匹配使用isIncludedRoute(current, compareTarget)即当前路由包含目标路由即激活精确匹配使用isSameRoute见 src/components/link.js。这解释了为什么在/user/foo页面时指向/user的链接也会带有.router-link-active点击行为默认监听click事件可通过event属性修改触发后调用router.pushreplace属性存在时调用router.replace且guardEvent会拦截带修饰键Ctrl/Shift/Meta/Alt、右键点击以及target_blank的点击避免破坏浏览器原生行为见 src/components/link.js 与 src/components/link.js。详细的属性与行为说明见 docs-gitbook/ja/api/router-link.md。配套示例与扩展阅读仓库的 examples/basic/app.js 是官方入门文档对应的完整可运行示例它在上述基础之上额外演示了mode: history与base的配置方式router.beforeEach全局前置守卫示例中用于模拟延迟导航replace修饰、tag自定义标签、v-slot作用域插槽等router-link的高级用法通过$router.push编程式导航。入门之后建议按以下路径继续深入均为仓库内文档动态路由匹配/user/:id这类带参数路由嵌套路由多层级页面结构与命名视图编程式导航router.push/router.replace/router.go的完整用法导航守卫全局、路由级、组件级守卫History 模式HTML5 History 与 Hash 模式的选择及服务端配置。至此你已经掌握了 vue-router 的完整入门链路从 HTML 骨架、四步式 JavaScript 配置到组件内访问$router/$route再到激活类名的判定原理。接下来即可基于 examples/basic/app.js 动手改造构建属于你自己的第一个 SPA 路由应用。赞分享前端路由【免费下载链接】vue-router The official router for Vue 2项目地址https://gitcode.com/gh_mirrors/vu/vue-router点击查看免费下载相关推荐Nextcloud路由管理Vue Router单页面应用Nextcloud路由管理Vue Router单页面应用 路由系统概述 Nextcloud服务端路由管理通过PHP实现核心路由定义主要配置文件为 core/后端内容协同存储企业应用AnimeTV高级配置指南AniList同步、观看历史管理与自动更新设置全攻略AnimeTV高级配置指南AniList同步、观看历史管理与自动更新设置全攻略 想要充分发挥AnimeTV的强大功能吗 这款专为Android TV设计音视频深入解析Vue Router 3Vue 2官方路由器的核心架构深入解析Vue Router 3Vue 2官方路由器的核心架构 Vue Router 3作为Vue.js 2.x生态系统的官方路由解决方案提供了构建现代化单前端路由上一篇如何利用C2IntelFeeds进行威胁狩猎从入门到精通的实战教程下一篇Spring AI自定义扩展终极指南如何开发自己的AI组件与适配器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考