📢 鸿蒙专栏：想学鸿蒙的，冲
📢 C语言专栏：想学C语言的，冲
📢 VUE专栏：想学VUE的，冲这里
📢 CSS专栏：想学CSS的，冲这里
📢 Krpano专栏：想学VUE的，冲这里
🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！
目录
✨ 前言
✨ vue-router详解
vue-router的组成部分
前端路由的两种模式
导航解析流程
路由信息对象
✨ 结语
✨ 前言
Vue Router是Vue.js的官方路由管理器,它与Vue.js核心深度集成,可以很好地帮助我们构建单页面应用。那么它是如何工作的呢?本文将带你深入了解vue-router的工作原理。
✨ vue-router详解
vue-router的组成部分
- Route:路由对象,包含路径、组件等路由信息。
const routes = [ { path: '/user/:id', component: User, alias: '/usr', meta: { requiresAuth: true } } ] - Router:路由器对象,包含路由映射表和监听路由改变。
const router = new VueRouter({ routes // 路由映射表 }) // 监听路由改变事件 router.beforeEach((to, from, next) => { // ... }) - Router-view:根据当前路由渲染匹配的组件,是一个Outlet。
<router-view></router-view> - Router-link:路由连接,绑定到对应路由的锚点标签。
<router-link to="/user/123">User</router-link> - 导航守卫(Navigation Guards)：可在路由导航发生时进行访问控制。
导航守卫的类型
- 全局守卫:router.beforeEach,监听每一个路由导航。
- 路由独享守卫:beforeEnter在路由配置中定义。
- 组件内守卫:beforeRouteEnter,在激活组件前调用。
钩子的参数
- to:目标路由对象
- from:当前导航要离开的路由
- next:调用该方法来resolve这个钩子
next方法的处理
- next():进行管道中的下一个钩子。
- next(false):中断当前导航。
- next('/path'):跳转到一个不同的地址。
- next(error):传入一个Error实例作为参数,导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
应用场景
- 权限控制:检查用户权限 then决定允许进入路由或退回登录页。
- 数据预取:在进入路由前预先获取数据。
- 异步导航:路由导航成功之前展示“加载中”。
所以导航守卫可以对路由进行更多控制,是vue-router强大的功能之一。
router.beforeEach((to, from, next) => {
// ...
next()
})前端路由的两种模式
vue-router支持两种路由模式:
- hash: hash模式利用 URL 的 hash 实现路由。比如
http://example.com/#/user。
优点是兼容性好,无须服务器配置。但 URL 不够优雅,有 #,不符合 REST 风格。
实现:监听 hashchange 事件,根据 hash 更新组件。
window.addEventListener('hashchange', () => {
// 根据 hash 读取组件
})- history:history 模式通过 history API 改变 URL,如
http://example.com/user。
优点是 URL 优雅,没有 # 。但需要服务端支持,解析 URL 并重定向。
实现:通过 history.pushState() 改变 URL,监听 popstate 事件。
总结:
- hash 模式兼容性好,但 URL 不够优雅。
- history 模式 URL 优雅,但需要服务端配合解析。
- Vue Router 默认支持两种模式,可以根据需求选择。
导航解析流程
- 初始化路由器,注册路由表规则。
- Router-link组件或代码导航触发路由change。
- Router匹配当前URL,解析出目标路由记录。
- Router确认转移路由后,更新视图和URL。
- 组件根据路由参数准备数据,Router-view呈现组件。
路由信息对象
每个路由都会映射一个组件,同时可以有额外的元信息:
✨ 结语
vue-router通过管理路由与组件的动态映射,实现了单页面应用的不同页面之间的切换。路由器监听 URL 变化,映射匹配的路由配置,然后渲染目标组件。各种路由钩子也让我们可以更好地控制路由导航。
总而言之,vue-router为Vue单页面应用提供了便捷的客户端路由管理,使得页面模块化和开发更加高效。它与Vue深度集成,使构建复杂的单页面应用变得简单自然。正确理解和灵活运用其工作原理,可以使我们的Vue项目开发达到更高的水准。
