vue手写<RouterLink/>组件实现demo详解

import About from '../view/About.vue'
import Home from '../view/Home.vue'
import {ref} from 'vue'
export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]
// 新加内容
export const path = ref(window.location.pathname)

<template>
    <div>
        <component :is="view"></component>
    </div>
</template>
<script setup>
import { computed } from 'vue'
import Router from '../Router';
// 引入path这个响应式数据
import { path } from '../Router';
const view = computed(() => {
  // 这里直接使用的path
   const res = Router.find(item => item.path == path.value)
   return res.component
})
</script>
<style lang="scss" scoped>
</style>

<template>
    <div>
        <a :href="to" rel="external nofollow"  @click.prevent="push">
            <slot></slot>
        </a>
    </div>
</template>
<script setup>
import { path } from '../Router';
const props = defineProps({
    to: {type: String, required: true}
})
const push = () => {
    path.value = props.to
}
</script>

<RouterLink :to="'/'">首页</RouterLink>
<RouterLink :to="'/about'">关于</RouterLink>
<RouterView></RouterView>