关于 router-view 和 router-link 原理

router-view

<script setup>
import { computed } from 'vue'
import router from '../router'
import { path } from '../router'
const view = computed(() => {
  const route = router.routes.find(route => route.path == path.value)
  return route.component;
})
</script>

<template>
  <component :is="view" />
</template>

router-link

<script setup>
import { path } from '../router'
const prop = defineProps({
	to: { type: String, required: true }
})

const push = () => {
	path.value = prop.to
}
</script>

<template>
	<a href="/" @click.prevent="push">
		<slot />
	</a>
</template>

<style lang="scss">
</style>

app.vue

<script setup>
</script>

<template>
  <router-link to="/">home</router-link>
  <router-link to="/about">about</router-link>
  <hr />
  <div>
    <router-view />
  </div>
</template>

<style>
a {
  display: inline-block;
  margin-right: 20px;
}
</style>