Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
效果
點(diǎn)擊左側(cè)導(dǎo)航,右面頁面切換。
思路
使用router-view顯示點(diǎn)擊后需要切換的組件,需要先完成網(wǎng)頁的結(jié)構(gòu)。側(cè)面導(dǎo)航 + 頁面顯示部分
如:
設(shè)置一個(gè)class屬性,點(diǎn)擊元素時(shí)給當(dāng)前元素額外添加一個(gè)class類。給導(dǎo)航中每個(gè)點(diǎn)擊項(xiàng)添加上點(diǎn)擊事件,當(dāng)點(diǎn)擊當(dāng)前項(xiàng)時(shí)其它項(xiàng)的class變成原本的,當(dāng)前元素添加一個(gè)當(dāng)前點(diǎn)擊的class類,而組件切換則由router完成,使用router-link to 完成路由路徑切換。
當(dāng)前點(diǎn)擊模式類代碼:
.isclick { background: #e9feff; color: #0bbfbc; }
過程
獲取當(dāng)前點(diǎn)擊DOM并添加點(diǎn)擊class
這里需要注意,觸發(fā)事件的元素對(duì)象(不一定是綁定事件的對(duì)象,會(huì)因?yàn)槭录芭葑兓?,所以我們需要獲取綁定事件的元素對(duì)象。
- $event:當(dāng)前觸發(fā)的是什么事件
- $event.target:觸發(fā)事件的元素對(duì)象(不一定是綁定事件的對(duì)象)
- $event.currentTarget:綁定事件的元素對(duì)象
此處需要使用: e.currentTarget
改變選中元素的class: e.currentTarget.className = ‘nav-item isclick’
其中nav-item為未點(diǎn)擊時(shí)的navitem樣式類,isclick為點(diǎn)擊后更改的樣式類,原來樣式只有一個(gè)nav-item,再添加一個(gè)isclick。
將其它的導(dǎo)航未點(diǎn)擊項(xiàng)isclick樣式類去除
得到點(diǎn)擊項(xiàng)的其它兄弟節(jié)點(diǎn)
var domList = e.currentTarget.parentNode.children
parentNode 是得到父節(jié)點(diǎn)
children 是得到子節(jié)點(diǎn)
當(dāng)前元素的父節(jié)點(diǎn)的所有子節(jié)點(diǎn),是一個(gè)列表
將所有節(jié)點(diǎn)的點(diǎn)擊樣式類去除
for(let d=0;d<domList.length;d++){ domList[d].className = 'nav-item' }
遍歷當(dāng)前所有節(jié)點(diǎn)的兄弟節(jié)點(diǎn),并修改class。
完整代碼
導(dǎo)航代碼
導(dǎo)航組件代碼:
<template> <div class="nav"> <ul> <li v-for="item in NavList" class="nav-item" @click="clickNav($event)"> <div> <img class="nav-icon" :src="item.icon" width="20px" height="20px" alt="sy" /> <router-link :to="item.url">{{item.title}}</router-link> </div> </li> </ul> <div class="nav-img-box" style="margin-top: 108px;"> <img src="@/assets/裝飾圖.png" alt="zs" /> </div> </div> </template> <script setup> import { ref,reactive } from 'vue' var NavList = reactive([ { title: "合作伙伴", url: "/partner", icon: require("@/assets/首頁-選中.png") }, { title: "客戶列表", url: "/customer", icon: require("@/assets/客戶列表.png") }, { title: "訂單列表", url: "/order", icon: require("@/assets/財(cái)務(wù)列表.png") }, { title: "物料列表", url: "/materials", icon: require("@/assets/標(biāo)簽列表.png") }, { title: "成員管理", url: "/corpuser", icon: require("@/assets/員工列表.png") }, { title: "收益概覽", url: "/income", icon: require("@/assets/員工列表.png") }, { title: "價(jià)格配置", url: "/price", icon: require("@/assets/員工列表.png") }, { title: "系統(tǒng)設(shè)置", url: "/setting", icon: require("@/assets/員工列表.png") } ]) function clickNav(e) { var domList = e.currentTarget.parentNode.children for(let d=0;d<domList.length;d++){ domList[d].className = 'nav-item' } console.log('點(diǎn)擊',e.currentTarget) e.currentTarget.className = 'nav-item isclick' } </script> <style scoped> li { list-style-type: none; } a { text-decoration: none; color: #39475A; } .nav { width: 200px; height: 100%; background: #FFFFFF; box-shadow: 3px 0px 6px 0px rgba(82, 82, 82, 0.14); } .nav ul { margin-top: 32px; padding: 0; } .nav-item { width: 200px; height: 46px; font-family: PingFangSC-Medium; font-size: 16px; color: #39475A; letter-spacing: 0; line-height: 46px; font-weight: 500; } .nav-item div { margin-left: 17px; height: 46px; line-height: 46px; } .nav-item div img { width: 20px; height: 20px; } .nav-icon { vertical-align: middle; margin-right: 7px; padding-bottom: 6px; } .isclick { background: #e9feff; color: #0bbfbc; } .nav-img-box img { width: 200px; height: 416px; } </style>
代碼中的icon: require(“@/assets/員工列表.png”)為導(dǎo)航圖標(biāo),需要注意,如果不用require,直接寫圖片的地址的話可能出現(xiàn)無法找到圖片的問題,圖片的地址在html中使用時(shí)會(huì)被轉(zhuǎn)碼,出現(xiàn)類似%E9%A6%96%E9%A1%B5-%E9%80%89%E4%B8%AD.png的情況。
顯示頁面代碼
<template> <div class="page-body"> <PageNav></PageNav> <router-view /> </div> <div class="bottom"> <PageBottom></PageBottom> </div> </template> <script setup> import PageNav from "@/components/PageNav" import PartnerView from "@/views/PartnerView" import PageBottom from "@/components/PageBottom.vue" </script> <style scoped> .page-body { display: flex; } </style>
其中PageNav為前面的導(dǎo)航代碼
路由設(shè)置
router.js中代碼如下
import { createRouter, createWebHistory } from 'vue-router' import PartnerView from '../views/PartnerView.vue' import CustomerView from '../views/CustomerView.vue' import OrderView from '@/views/OrderView' import MaterialsView from '../views/MaterialsView' import CorpUserView from '@/views/CorpUserView' import InComeView from '@/views/InComeView' import PriceView from '@/views/PriceView' import SettingView from '@/views/SettingView' const routes = [ { path: '/', name: 'index', component: PartnerView, redirect: 'partner', }, { path: '/partner', name: 'partner', component: PartnerView }, { path: '/customer', name: 'customer', component: CustomerView }, { path: '/order', name: 'order', component: OrderView }, { path: '/materials', name: 'materials', component: MaterialsView }, { path: '/corpuser', name: 'corpuser', component: CorpUserView }, { path: '/income', name: 'income', component: InComeView }, { path: '/price', name: 'price', component: PriceView }, { path: '/setting', name: 'setting', component: SettingView } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
總結(jié)
到此這篇關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件的文章就介紹到這了,更多相關(guān)Vue3切換頁面內(nèi)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3.0+element Plus實(shí)現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
- Vue3實(shí)現(xiàn)簡約型側(cè)邊欄的示例代碼
- vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
- Vue-element-admin平臺(tái)側(cè)邊欄收縮控制問題
- vue框架實(shí)現(xiàn)將側(cè)邊欄完全隱藏
- vue實(shí)現(xiàn)側(cè)邊定位欄
- VuePress 側(cè)邊欄的具體使用
- 如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
- vue elementui簡易側(cè)拉欄的使用小結(jié)
相關(guān)文章
vue輕量級(jí)框架無法獲取到vue對(duì)象解決方法
這篇文章主要介紹了vue輕量級(jí)框架無法獲取到vue對(duì)象解決方法相關(guān)知識(shí)點(diǎn),有需要的讀者們跟著學(xué)習(xí)下。2019-05-05vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例
本篇文章主要介紹了vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05vue項(xiàng)目的html如何引進(jìn)public里面的js文件
這篇文章主要介紹了vue項(xiàng)目的html如何引進(jìn)public里面的js文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue項(xiàng)目中如何配置eslint和prettier
這篇文章主要介紹了vue項(xiàng)目中如何配置eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03