手撕 Vue.js 中的 Vue-router (一)：从 <a> 标签实现router-link

前言

      在vue-router中组件router-link可以通过其中的to属性来指定目标路由的路径，当用户点击点击这个组件时，vue-router会根据属性to所指向的路由进行跳转。但是作为vue-router中的router-link组件又是如何实现跳转的呢？接下来Virtual09会为大家介绍如何实现组件router-link.

vue-link与a标签

      众所周知<a>标签也是可以实现页面跳转，那么它与router-link之间存在什么不同呢？<a>标签实现页面跳转不会改变URL,直接跳转页面，而组件router-link实现页面跳转会修改URL,使用组件router-link来创建页面链接，使我们可以不需要重新加载页面的情况下修改URL,处理URL的生成，编码和其他功能。

使用a标签实现组件router-link

      首先我们使用'npm init vite'指令创建一个vue项目，在项目下的src文件夹下我们创建文件夹router用于路由的配置，在router文件夹下创建index.js文件以及grouter文件夹

index.js文件我们用于写路由配置，在grouter文件夹下我们去实现组件router-link以及一些配置的书写。在grouter文件下创建文件index.js以及RouterLink.vue.index.js用于书写配置，RouterLink用于实现组件router-link.

在RouterLink.vue文件中我们使用a标签加上v-bind动态绑定属性

<template>
    <!-- # 哈希路由 -->
    <a :href="'#' + props.to">
        <!-- <slot></slot>插槽占位符 获取到路由组件传过来的值-->
         <slot></slot>
    </a>
</template>

<script setup>
    import {defineProps} from 'vue' 
    const props = defineProps({
        to:{
            type: String,
            required: true  //必须传值
        }
    })
</script>

<style lang="css" scoped>

</style>

我们获取到父组件传过来的值'to'我们声明这个值是必须传过来的值，所以我们设置属性required:true 这就表示这个值是一个必须传过来的值。中间的slot插槽占位符的作用是获取到父组件路由组件中传过来的值 比如

<router-link to='/'>首页</router-link>

插槽占位符就会把'首页'获取到放在a标签中。然后再把RouterLink.vue引入父组件App.vue中就成功地把RouterLink.vue引入了组件树中。 然后我们在grouter文件夹下的index.js文件中封装VueRouter 首先我们引入RouterLink.vue文件

然后我们创建一个Router类

//控制路由的实例化，只实例化一次
const createRouter = () =>{
    return new Router()
}
class Router {
// 添加一个构造方法
    constructor(){
    }
    // 提供一个install方法
    install(app){
        // 完成全局组件的声明
        app.component('router-link',RouterLink)
    }
}

export {
    createRouter
}

这里我们需要提供install方法，并且在vue中会把全局对象app提供给install，我们进行全局组件声明。在component中提供两个参数一个是组件名，一个是组件本体。然后在App.vue文件中就不需要引入子组件了。