vue使用動態(tài)組件手寫Router View實現(xiàn)示例
更新時間：2023年06月16日 09:22:13 作者：XiaoSong
這篇文章主要為大家介紹了vue使用動態(tài)組件手寫RouterView實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
使用動態(tài)組件實現(xiàn)一個簡單的<RouterView/>組件
1、創(chuàng)建view/Home.vue和view/About.vue
<!--?About?--> <template> ????about </template> <script?setup></script> <!--?Home?--> <template> ????home </template> <script?setup></script>
2、創(chuàng)建一個Router/index.js文件
內(nèi)容如下:
import?About?from?'../view/About.vue'
import?Home?from?'../view/Home.vue'
export?default?[
????{
????????path:?'/',
????????component:?Home
????},
????{
????????path:?'/about',
????????component:?About
????}
]3、創(chuàng)建component/RouterView.vue
內(nèi)容如下
<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>
在瀏覽器地址框輸入對應(yīng)的path就能實現(xiàn)頁面的切換了。
以上就是vue使用動態(tài)組件手寫RouterView實現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于vue手寫RouterView組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
最近在vue3項目中通過three.js實現(xiàn)了實際的三維效果demo,下面這篇文章主要給大家介紹了關(guān)于在vue中使用three.js的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue element項目引入icon圖標(biāo)的方法
這篇文章主要介紹了vue element項目引入icon圖標(biāo)的方法,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-06-06
vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)
這篇文章主要介紹了vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05
ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
一文解決vue2 element el-table自適應(yīng)高度問題
在寫公司后臺項目的時候遇到一個需求,要求表格頁面不能有滾動條,所以必須封裝一個公共方法來實現(xiàn)表格自適應(yīng)高度,本問小編給大家介紹了如何解決vue2 element el-table自適應(yīng)高度問題,需要的朋友可以參考下2023-11-11
超詳細(xì)動手搭建一個VuePress 站點及開啟PWA與自動部署的方法
這篇文章主要介紹了超詳細(xì)動手搭建一個VuePress 站點及開啟PWA與自動部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)
這篇文章主要介紹了vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue的Pinia如何做到刷新不丟數(shù)據(jù)
Pinia 是 Vue 3 的官方推薦狀態(tài)管理庫,旨在替代 Vuex,提供更簡單、直觀的狀態(tài)管理解決方案,Pinia 的設(shè)計理念是簡單、易于學(xué)習(xí)和使用,本文給大家詳細(xì)介紹了Vue的Pinia如何做到刷新不丟數(shù)據(jù),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03