手撕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，对于全局引入组件也有了一个更加深刻的理解

相信看到这里的你也一定会有所收获的！！！