vue使用动态组件手写Router View实现示例
更新时间：2023年06月16日 09:22:13 作者：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组件的资料请关注脚本之家其它相关文章！
相关文章
最近在vue3项目中通过three.js实现了实际的三维效果demo,下面这篇文章主要给大家介绍了关于在vue中使用three.js的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue子组件使用自定义事件向父组件传递数据的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-05-05
ElementUI $notify通知方法中渲染自定义组件实现
这篇文章主要为大家介绍了ElementUI $notify通知方法中渲染自定义组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
一文解决vue2 element el-table自适应高度问题
在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度,本问小编给大家介绍了如何解决vue2 element el-table自适应高度问题,需要的朋友可以参考下2023-11-11
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
这篇文章主要介绍了超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue监听键盘事件的相关总结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了vue中button标签样式和功能禁用的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Pinia 是 Vue 3 的官方推荐状态管理库,旨在替代 Vuex,提供更简单、直观的状态管理解决方案,Pinia 的设计理念是简单、易于学习和使用,本文给大家详细介绍了Vue的Pinia如何做到刷新不丢数据,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue3封装Element导航菜单的实例代码,分为菜单数据格式示例,控制导航收缩的详细代码,本文通过实例代码介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
最新评论