vue使用动态组件手写Router View实现示例
作者：XiaoSong
这篇文章主要为大家介绍了vue使用动态组件手写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就能实现页面的切换了。
以上就是vue使用动态组件手写RouterView实现示例的详细内容，更多关于vue手写RouterView组件的资料请关注脚本之家其它相关文章！