手撕Vue中的RouterLink和RouterView，深入理解其底层原理（一）
RouterLink和RouterView的作用
我们可以通过RouterLink绑定好指向的路径
点击就能够实现在RouterView中将页面显示出来
我们首先使用官方的vue-router展示一下效果
- App.vue
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view />
</div>
</template>
<script setup></script>
这其中有没有发现一个问题，我们根本就没有去引入RouterLink和RouterView，但是却可以正常的使用它们
其中就是因为
- mian.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
我们在app中use了router，也就是说我们通过这个方式已经全局的引入了这两个组件，并且他们能够实现一个路由跳转的功能
接下来我们逐一分析一下RouterLink和RouterView
手撕RouterLink，原理全解！！！！
我们知道，RouterLink是可以实现路由跳转的，接下来我们去手撕一下它的源码
RouterView手撕在下一篇文章
手撕Vue中的RouterLink和RouterView，深入理解其底层原理（二） - 掘金 (juejin.cn)
就可以知道他的里面是肯定有一个a标签用于做路由跳转的
所有我们可以把代码写成这样，这里采用hash的方式去做，所以才有#号
在模板中创建了一个链接 <a> 元素，链接的 href 属性值为 '#' + props.to
以 # 加上传入的 to 属性值作为链接地址
- RouterLink.vue
<template>
<a :href="'#' + props.to">
<slot/>
</a>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
to: {
type: String,
required: true
}
})
</script>
我们首先将vue自带的vue-router给取消引入
- main.js
import { createApp } from 'vue'
import App from './App.vue'
// import router from './router'
const app = createApp(App)
// app.use(router)
app.mount('#app')
接下来我们去修改app.vue的代码，引入我们自己的routerlink
- App.vue
<template>
<div>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<router-view />
</div>
</template>
<script setup>
import RouterLink from './router/grouter/RouterLink.vue'
</script>
<style lang="scss" scoped></style>
可以看到在组件树中已经将我们自己的组件渲染了
目前就是实现了简单的路由的切换了
但是我们这里是通过引入的方式才能使用，而官方的却不需要，说明什么？
这两个组件是全局组件，在任何一个地方都是可以使用的
接下来我们就需要创建一个js文件
- @/router/grouter/index.js
import { createRouter } from "vue-router";
class Router {
constructor() {}
}
const createRouter = function () {
return new Router();
};
export { createRouter };
定义了一个 Router 类和一个 createRouter 函数。
在这个 createRouter 函数中，它的作用是创建并返回一个 Router 类的实例。通过 export { createRouter }; 语句，使得 createRouter 函数可以在其他模块中被导入和使用。
继续创建一个js文件引入这个createRouter，并创建router
- @/router/index.js
import { createRouter } from '@/router/grouter/index';
const router = createRouter();
export default router;
然后在main.js中去使用这个文件
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
接下来我们在效果中可以看到
这代码警告诉我们一个插件必须实现"install"方法才可以被use
接下来我们就需要前言修改代码了
- @/router/grouter/index.js
class Router {
constructor() {
}
install(){
console.log('vue对接router')
}
}
const createRouter = function () {
return new Router();
};
export { createRouter };
我们就能看到效果了
接下来我们就可以在install里面完成全局组件的声明
因为在使用use的时候，会给install方法传入一个app，使用app.component就可以注册一个全局的组件
修改install方法
install(app) {
console.log(app);
console.log("vue对接router");
app.component("RouterLink", RouterLink);
}
我们就可以看到打印的效果为
接下来我们就能在全局使用RouterLink了
将App.vue中的import RouterLink from './router/grouter/RouterLink.vue'注释以后
原来的路由变更效果一样可以实现！！
这样我们的RouterLink的基本原理就已经被我们手撕出来了！！！
由于篇幅过长，RouterView的手撕就放在下一节文章来讲述，RouterView的手撕更加的精彩！！！
手撕Vue中的RouterLink和RouterView，深入理解其底层原理（二） - 掘金 (juejin.cn)
总结
本文我们手撕了RouterLink，对于全局引入组件也有了一个更加深刻的理解
相信看到这里的你也一定会有所收获的！！！
原文地址：https://blog.csdn.net/weixin_56440777/article/details/140398439
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！