手写RouterView组件

使用动态组件实现一个简单的<RouterView/>组件。

1、创建view/Home.vue和view/About.vue

<!-- About -->
<template>
    about
</template>
<script setup></script>

<!-- Home -->
<template>
    home
</template>
<script setup></script>

2、创建一个Router/index.js文件,内容如下:

import About from '../view/About.vue'
import Home from '../view/Home.vue'

export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]

3、创建component/RouterView.vue，内容如下

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

<script setup>
import { computed } from 'vue'
import Router from '../Router';

const view = computed(() => {
   const res = Router.find(item => item.path == window.location.pathname)
   return res.component
})
</script>

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

4、在App.vue中引入自己写的RouterView组件

<script setup>
import RouterView from './components/RouterView.vue';
</script>

<template>
  <div>
    <RouterView></RouterView>
  </div>
</template>

在浏览器地址框输入对应的path就能实现页面的切换了。

本文由mdnice多平台发布