第143篇:手写vue-router,实现router-view
好家伙,
今天来手写我们的老伙计vue-router,
1.替换router
新开一个项目,并使用我们手写的router
2.大致结构
let Vue; // 保存vue的构造函数
class VueRouter {
constructor(options) {
}
}
VueRouter.install = (_Vue) => {
Vue = _Vue; //备份Vue
Vue.mixin({
beforeCreate() {
if (this.$options.router) {
Vue.prototype.$router = this.$options.router;
}
}
})
Vue.component("router-link", {});
//实现思路,找到对应的组件并将它渲染出来
Vue.component("router-view", {});
}
export default VueRouter;
2.1.这里使用Vue.mixin()，使任何组件都能调用到router
2.2.Vue = _Vue,一会要用到Vue的方法,将某个变量变为响应式的
3.router-link实现
3.1.组件的使用
3.2.实现
Vue.component("router-link", {
props: {
to: {
type: String,
required: true,
},
},
render(h) {
return h("a", {
attrs: {
href: `#${this.to}`
}
}, this.$slots.default);
}
});
重点来了,为什么要用个#?
在这段代码中，使用 # 的目的是为了在单页面应用（SPA）中实现基于 hash 的路由。在传统的单页面应用中，通过改变 URL 中的 hash 部分来切换页面内容，而不会导致整个页面重新加载。这种方式被称为 hash 模式路由。
具体来说，当用户点击带有 # 的链接时，浏览器会更新 URL 中的 hash 部分，但不会触发整个页面的重新加载，而是根据新的 hash 值来 更新页面内容，从而实现页面的切换和路由导航。
在 Vue 中，使用 # 可以帮助我们正确地处理 hash 模式路由。
4.实现router-view
Vue.component("router-view", {
render(h) {
let component = null;
//获取当前路由所对应的组件并将它渲染出来
const current = this.$router.current;
const route = this.$router.$options.routes.find((route) =>
route.path === current
)
// const route = this.$router.$options.routes.find((route) =>
// {route.path === current}
// )
//!!错误
//若使用箭头函数块{},必须要有返回值
console.log(route, current)
if (route) {
component = route.component
}
return h(component);
}
});
总体上看,代码逻辑非常简单,在router中找到匹配的组件,然后返回相应的组件就好了,但问题来了,我怎么知道当前页面current是什么?
5.实现VueRouter
class VueRouter {
constructor(options) {
this.$options = options;
this.current = "/";
let initial = window.location.hash.slice(1) || "/"
Vue.util.defineReactive(this, "current", initial)
window.addEventListener("hashchange", () => {
this.current = window.location.hash.slice(1) || "/"
console.log(this.current)
})
}
}
第一步:开始我们默认this.current = "/"; 即首页,
第二步:将current变为响应式数据,
第三步:让current动态获取当前路由的值
问:为什么要将current变为响应式数据?
答:render的更新依赖于响应式数据curren,若current不为响应式数据,current变化,render不会重新渲染
搞定
6.源码
let Vue; // 保存vue的构造函数
class VueRouter {
constructor(options) {
this.$options = options;
this.current = "/";
let initial = window.location.hash.slice(1) || "/"
Vue.util.defineReactive(this, "current", initial)
window.addEventListener("hashchange", () => {
this.current = window.location.hash.slice(1) || "/"
console.log(this.current)
})
}
}
VueRouter.install = (_Vue) => {
Vue = _Vue; //备份Vue
Vue.mixin({
beforeCreate() {
if (this.$options.router) {
Vue.prototype.$router = this.$options.router;
}
}
})
Vue.component("router-link", {
props: {
to: {
type: String,
required: true,
},
},
render(h) {
return h("a", {
attrs: {
href: `#${this.to}`
}
}, this.$slots.default);
}
});
//实现思路,找到对应的组件并将它渲染出来
Vue.component("router-view", {
render(h) {
let component = null;
//获取当前路由所对应的组件并将它渲染出来
const current = this.$router.current;
// const route = this.$router.$options.routes.find((route) =>
// route.path === current
// )
const route = this.$router.$options.routes.find((route) =>
{return route.path === current}
)
//!!错误
//若使用箭头函数块{},必须要有返回值
console.log(route, current)
if (route) {
component = route.component
}
return h(component);
}
});
}
export default VueRouter;
7.补充
一个小小bug
const route = this.$router.$options.routes.find((route) =>
route.path === current
)
不能写成
const route = this.$router.$options.routes.find((route) =>
{route.path === current}
)
第一段代码使用了简洁的箭头函数写法，直接返回了 route.path === current 的结果。这种写法适用于只有一行代码的情况，箭头函数会自动将这一行代码的结果作为返回值。因此，第一段代码会返回第一个满足条件 route.path === current 的 route 对象。
第二段代码使用了代码块 {} 包裹起来，但在代码块中没有显式返回值。这种情况下，箭头函数不会自动返回代码块中的结果，需要手动添加 return 关键字来返回值。因此，第二段代码中的箭头函数没有正确返回值，会导致代码出错。
所以，若要使用代码块 {}
const route = this.$router.$options.routes.find((route) =>
{return route.path === current}
)
