vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)方法
更新時間：2023年08月23日 09:04:44 作者：藏貓虎
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考價值,需要的朋友可以參考下
Vue Router
我們可以使用router來實(shí)現(xiàn)
1.準(zhǔn)備頁面
去餓了么（element-plus）找到自己喜歡的頁面然后按需導(dǎo)入，以下以自己的例子來實(shí)現(xiàn)首先引入布局容器
然后引入菜單欄
引入這兩個，先看效果
此時基本的頁面準(zhǔn)備好了
2.在js中引入router并且允許容器使用router
容器是有這個屬性的，但默認(rèn)值為false
并把菜單欄里對應(yīng)的文字改為<router-link>
在你想要變換頁面的位置放入<router-view></router-view>占位比如我是想在main塊里進(jìn)行頁面切換
然后準(zhǔn)備切換的組件頁面
為每個組件配置router路徑
注意這里一定要配置為此視圖的子路徑，如果配置和home同級，那么當(dāng)點(diǎn)擊菜單欄后就會將整個頁面替換為組件頁面
項(xiàng)目目錄如圖
以home為主視圖，以test，test1為組件進(jìn)行切換
運(yùn)行效果
總結(jié)
到此這篇關(guān)于vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3點(diǎn)擊菜單頁切換局部頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
茶余飯后聊聊Vue3.0響應(yīng)式數(shù)據(jù)那些事兒
這篇文章主要介紹了茶余飯后聊聊Vue3.0響應(yīng)式數(shù)據(jù)那些事兒，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue 中的動態(tài)傳參和query傳參操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式
這篇文章主要介紹了vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
從Vue到Postman全面驗(yàn)證API接口跨域問題解決
我們都知道跨域是同源策略導(dǎo)致的,域名不同、協(xié)議不同、端口號不同任意一種情況都會導(dǎo)致跨域,這篇文章主要介紹了從Vue到Postman全面驗(yàn)證API接口跨域問題,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue-router的使用方法及含參數(shù)的配置方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue2中基于vue-simple-upload實(shí)現(xiàn)文件分片上傳組件功能
這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁面切換并加上動畫效果的相關(guān)資料,vue的過渡動畫主要是transition標(biāo)簽的使用,配合css動畫實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06
在開發(fā)Vue應(yīng)用時,我們經(jīng)常需要在多個組件中復(fù)用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫中導(dǎo)入的,下面我們就來看看如何正確引用和使用外部方法吧2024-01-01
剛剛創(chuàng)建好vue項(xiàng)目的時候,運(yùn)行 npm run dev 會報錯,下面這篇文章主要給大家介紹了關(guān)于運(yùn)行npm?run?dev報錯的原因及解決方法,需要的朋友可以參考下2022-10-10