今天,我们将手把手实现一个简化版的vue-router,主要通过hash模式来实现网址的跳转改变。本文将涉及router-link、router-view以及路由配置,旨在帮助大家深刻理解vue-router在路由加载背后究竟做了些什么。话不多说,让我们直接进入主题。
以下是App.vue文件的代码,感兴趣的小伙伴们可以跟随我一起来实现这个简化版的vue-router。
<template>
<div>
<header>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">About</router-link>
</nav>
</header>
<main>
<router-view></router-view>
</main>
<footer></footer>
</div>
</template>
<script setup>
</script>
<style lang="css" scoped>
</style>
接下来是router/index.js的完整代码,我们在这里配置路由:
import { createRouter, createWebHashHistory } from './grouter/index.js';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/about',
name: 'About',
component: About
}
]
})
export default router;
首先,我们来理解一下app.use。
在使用路由插件时,我们通常会在main.js中使用app.use来导入router插件。要手写vue-router,必须先搞懂app.use()的作用。
通过查阅官方文档。
- 我们知道插件中自带一个install()方法。
- 在app.use方法内会自动执行。
- 因此,我们只需关注插件的实现即可。
- 接下来,我们需要创建一个Router对象来管理路由。
- 在useRouter方法和createRouter中,我们可以了解到,在vue-router中有一个Router对象负责全局路由的管理。
下面我们来逐一实现这一功能。
我们来看install方法。
- 我们需要将整个路由对象暴露出去。
- 然后使用createRouter方法来接收暴露的Router对象。
- 并在默认导出时使用provide和inject方法来暴露和接收Router对象。
- 此外,我们还需要使用app.component来注册router-link和router-view为全局组件。 以下是Router和useRouter的完整代码,路径:router/grouter/index.js。
// 标记一下 router 要向所有人暴露
const ROUTER_KEY = "__router__";
export const useRouter = () => {
//通过关键字获取暴露的Router对象
return inject(ROUTER_KEY);
}
class Router {
constructor(options) {
//history对象就是createHashWebHistroy返回的history对象
this.history = options.history;
// 路由对象数组,path,component,name等配置对象
this.routes = options.routes;
//获取当前路由地址
this.current = ref(this.history.url);
// 这里的方法是监听hashchange事件来更新current,切换路由
//,可以先不看这一段等会会讲
this.history.bindEvent(() => {
this.current.value = window.location.hash.slice(1);
})
}
//use 会调用 插件的install方法
install(app) {
// 全局声明 有一个router 全局使用的对象
app.provide(ROUTER_KEY, this);
console.log("准备与vue对接");
//注册全局组件
app.component('router-link', RouterLink);
app.component('router-view', RouterView);
}
}
首页
接下来,我们来实现router-link和router-view。
router-link本质是使用了a标签,所以我们在进行router-link组件封装时, 直接使用标签进行地址栏的跳转,to可以用defineProps来接受,但是router-link中的文字如何添加进入a标签中呢?这里我们使用到插槽Slots语法。
首先是router-link,其完整代码如下,路径:router/grouter/RouterLink.vue。
<template>
<a :href="'#' + props.to">
<slot></slot>
</a>
</template>
<script setup>
const props = defineProps({
to: {
type: String,
required: true,
},
});
</script>
<style lang="css" scoped>
</style>
然后是router-view,其完整代码如下,路径:router/grouter/RouterView.vue
router-view需要的就相对繁琐一些,因为需要动态的根据地址hash的改变来进行组件的渲染,所以这里我们主要需要两个功能的实现。
组件的动态渲染 hash地址的寻找正确的组件 首先思考功能1,v-if虽然可以动态渲染组件但是太多组件的话这要多少个v-else-if,所以排除,那有没有一种 可以让我们只需要写一个组件然后让组件自动渲染不同的组件呢?你别说哦~~还真有。
传送门:内置特殊元素 | Vue.js (vuejs.org) 这个component组件还真可以满足我们的需求进行组件的动态渲染。那么我们接下来只需要考虑组件的寻找了。
我们可以创建一个mapRouter的map对象,然后在组件被加载时,进行当前router-view对象中的组件信息进行注册(set(path,component)),然后更改地址,只需要进行get方法就可以拿到对应的组件,但是注意有可能用户会输入错误代码所以需要进行校验
<template>
<!-- 动态组件 -->
<component :is="component"></component>
</template>
<script setup>
import { useRouter } from "./index.js";
import { computed } from "vue";
const router = useRouter();
// router-view 动态组件 展示 依赖于url的变化
const mapRouter = new Map();
const reflectMapRouter = (router) => {
router.routes.forEach((route) => {
// 更具路径进行组件查询,保证O(1)时间
mapRouter.set(route.path, route.component);
});
};
//方法执行进行组件注册
reflectMapRouter(router);
// 响应式 router.current 设置为ref
//设置为计算属性响应式更新
const component = computed(() => {
const nowRoute =```
const nowRoute = mapRouter.get(router.current.value);
//这里注意,需要进行校验,因为用户可能输入错误网址
return nowRoute ? nowRoute : null;
});
</script>
<style lang="css" scoped>
</style>
最后,我们来实现createWebHashHistory和createRouter。
createWebHashHistory负责监听网址的改变,并提供地址中的hash值,而createRouter则简单返回一个new Router()实例。 以下是它们的代码,路径 router/grouter/index.js:
export const createRouter = (options) => {
return new Router(options);
}
export const createWebHashHistory = () => {
function bindEvent(fn) {
window.addEventListener('hashchange', fn);
}
// history 对象
return {
url: window.location.hash.slice(1) || '/',
bindEvent
}
}