vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)方法
Vue Router
我們可以使用router來實(shí)現(xiàn)
1.準(zhǔn)備頁面
去餓了么（element-plus）找到自己喜歡的頁面然后按需導(dǎo)入，以下以自己的例子來實(shí)現(xiàn)首先引入布局容器
然后引入菜單欄
引入這兩個(gè)，先看效果
此時(shí)基本的頁面準(zhǔn)備好了
2.在js中引入router并且允許容器使用router
容器是有這個(gè)屬性的，但默認(rèn)值為false
并把菜單欄里對(duì)應(yīng)的文字改為<router-link>
在你想要變換頁面的位置放入<router-view></router-view>占位比如我是想在main塊里進(jìn)行頁面切換
然后準(zhǔn)備切換的組件頁面
為每個(gè)組件配置router路徑
注意這里一定要配置為此視圖的子路徑，如果配置和home同級(jí)，那么當(dāng)點(diǎn)擊菜單欄后就會(huì)將整個(gè)頁面替換為組件頁面
項(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇vue之瀏覽器存儲(chǔ)方法封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在Vue應(yīng)用程序中,路由組件是構(gòu)建單頁應(yīng)用的關(guān)鍵部分,傳遞參數(shù)給路由組件可以讓我們動(dòng)態(tài)地展示內(nèi)容,處理用戶輸入,以及實(shí)現(xiàn)各種交互功能,本文就給大家介紹了六種Vue路由組件傳遞參數(shù)場(chǎng)景,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue 自定義指令directives及其常用鉤子函數(shù)說明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來閱讀下面文章的具體內(nèi)容2021-10-10
Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)
這篇文章主要為大家詳細(xì)介紹了Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue項(xiàng)目使用electron打包桌面應(yīng)用方式
本文詳細(xì)介紹了如何使用Vue3和Electron創(chuàng)建一個(gè)桌面應(yīng)用程序,并提供了一個(gè)完整的步驟指南,包括項(xiàng)目初始化、配置、安裝依賴、主進(jìn)程和渲染進(jìn)程的設(shè)置、打包配置以及解決常見問題的方法2025-12-12
vue實(shí)現(xiàn)消息的無縫滾動(dòng)效果的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)消息的無縫滾動(dòng)效果的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
一般在vue項(xiàng)目開發(fā)中，事件的處理邏輯一般很復(fù)雜，我們可以將處理的邏輯變成函數(shù)，在vue開發(fā)中，一般使用的是使用的是v-on指令進(jìn)行事件的監(jiān)聽，事件監(jiān)聽的過程中觸發(fā)相應(yīng)的JavaScript代碼2022-08-08
Vue?使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類型大小同名等進(jìn)行限制
個(gè)人在做文件上傳功能的時(shí)候,踩過不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類型大小同名等進(jìn)行限制問題,感興趣的朋友一起看看吧2024-02-02