前言
在现代前端应用中,单页面应用(SPA)是主流趋势。SPA依赖于路由系统来管理不同视图之间的导航。虽然Vue.js框架提供了官方的vue-router
库来处理路由,但理解其工作原理对于深入学习框架和提升开发技能至关重要。下面,我们将通过一系列代码片段,一步步构建一个简易版的Vue Router。
1. 定义路由组件
首先,我们有基本的组件如Home.vue
和About.vue
,它们分别对应主页和关于页面。这些组件将被不同的路由路径映射到DOM树中的特定位置。
2. 创建路由实例
在router/index.js
中,我们导入了自定义的createRouter
和createWebHashHistory
函数。这两个函数用于初始化路由实例,并设置使用hash模式。
import { createRouter, createWebHashHistory } from './grouter/index'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
3. 路由逻辑实现
grouter/index.js
中的createRouter
和createWebHashHistory
实现了路由的核心逻辑。createWebHashHistory
负责监听浏览器的哈希变化事件,而createRouter
则管理着当前的路由状态。
export const createRouter = (options) => {
return new Router(options)
}
4. Router类
Router
类是整个路由系统的中心。它接收路由配置并维护当前的路由状态。通过监听hashchange
事件,Router
能够实时更新当前的路由信息。
class Router {
constructor(options) {
this.history = options.history
this.routes = options.routes
this.current = ref(this.history.url)
this.history.bindEvents(() => {
this.current.value = window.location.hash.slice(1)
})
}
}
5. 路由组件注册
- router-link router-view
- vue 组件
- 自定义组件
- transition 内置组件
- 全局组件 在任何地方都可以直接访问 app.component('router-link',RouterLink)
- 如果组件没有引入, dom 会把它当做一般标签来解析
- app.component
- app.use(router)
Router
类还包含了一个install
方法,用于将RouterLink
和RouterView
组件注册为全局组件。这样,我们可以在任何地方使用这两个组件,无需单独导入。
install(app) {
app.provide(ROUTER_KEY, this)
app.component('router-link', RouterLink)
app.component('router-view', RouterView)
}
6. RouterLink和RouterView
RouterLink
组件用于创建链接,当用户点击时,它会改变URL的哈希值,触发路由切换。RouterView
则是一个占位符,用于渲染当前激活的路由组件。
- router 插件 准准备好nstall方法
- - 插槽 - 将组件的内部交给外部去自定义 - 提升了组件的可复用性
<!-- RouterLink.vue -->
<template>
<a :href="'#' + props.to">
<slot />
</a>
</template>
<!-- RouterView.vue -->
<template>
<!-- 渲染当前路由对应的组件 -->
</template>
7. 使用路由
最后,在App.vue
中,我们使用RouterLink
和RouterView
来实现导航和视图渲染。
<!-- App.vue -->
<template>
<header>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">About</router-link>
</nav>
</header>
<main>
<router-view />
</main>
</template>
最后呈现的效果如图所示
-
注意观察hash地址
-
当我们点击首页
页面会跳转到'/'下
- 点击About
跳转到'/about'下
结语
总之,通过手工实现Vue Router,我们不仅理解了路由系统的基本结构和工作流程,还探索了如何扩展它以支持更复杂的场景。从简单的组件注册到高级的路由守卫和懒加载,每一步都为我们提供了一次深入学习Vue.js框架的机会。这种深度理解有助于我们在实际项目中更加自信地运用和调试路由相关的功能,同时也为将来可能遇到的自定义需求打下了坚实的基础。