自学内容网 自学内容网

手撕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)!