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组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue正确使用watch监听属性变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了django+vue项目搭建实现前后端通信，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式？这是我们所要探讨的主题,本文总结了 vue 组件间通信的几种方式,需要的朋友可以参考下2025-03-03
这篇文章主要为大家介绍了vue this.$router六种方法使用示例总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了详解Vue前端生产环境发布配置实战篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
vue element-ui里的table中表头与表格出现错位的解决
这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-07-07
在现代Web应用中,Office 文件的预览是一个常见的需求,本文将使用Vue-Office实现Office文件预览组件,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
我在做一个附件删除功能的时候发现,明明打印出来附件已经没有数据了但是页面就是不刷新, this.$set()不生效,所以本文小编给大家介绍了vue中this.$set()不更新的解决方法,需要的朋友可以参考下2023-11-11
本文主要介绍了vue项目兼容ie11的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论