Vue3點擊側(cè)邊導航欄完成切換頁面內(nèi)組件全過程(WEB)

更新時間：2023年06月12日 11:37:46 作者：li-xun

寫頁面的時候都會用到一些導航欄、點擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關于Vue3點擊側(cè)邊導航欄完成切換頁面內(nèi)組件的相關資料,需要的朋友可以參考下

效果

點擊左側(cè)導航，右面頁面切換。

思路

使用router-view顯示點擊后需要切換的組件，需要先完成網(wǎng)頁的結(jié)構(gòu)。側(cè)面導航 + 頁面顯示部分

如：

導航加顯示

設置一個class屬性，點擊元素時給當前元素額外添加一個class類。給導航中每個點擊項添加上點擊事件，當點擊當前項時其它項的class變成原本的，當前元素添加一個當前點擊的class類，而組件切換則由router完成，使用router-link to 完成路由路徑切換。

當前點擊模式類代碼：

.isclick {
		background: #e9feff;
		color: #0bbfbc;
	}

過程

獲取當前點擊DOM并添加點擊class

這里需要注意，觸發(fā)事件的元素對象（不一定是綁定事件的對象，會因為事件冒泡變化），所以我們需要獲取綁定事件的元素對象。

$event：當前觸發(fā)的是什么事件
$event.target:觸發(fā)事件的元素對象（不一定是綁定事件的對象）
$event.currentTarget:綁定事件的元素對象

此處需要使用: e.currentTarget

改變選中元素的class: e.currentTarget.className = ‘nav-item isclick’

其中nav-item為未點擊時的navitem樣式類，isclick為點擊后更改的樣式類，原來樣式只有一個nav-item，再添加一個isclick。

將其它的導航未點擊項isclick樣式類去除

得到點擊項的其它兄弟節(jié)點

var domList = e.currentTarget.parentNode.children

parentNode 是得到父節(jié)點

children 是得到子節(jié)點

當前元素的父節(jié)點的所有子節(jié)點，是一個列表

將所有節(jié)點的點擊樣式類去除

for(let d=0;d<domList.length;d++){
	domList[d].className = 'nav-item'
}

遍歷當前所有節(jié)點的兄弟節(jié)點，并修改class。

完整代碼

導航代碼

導航組件代碼：

<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/財務列表.png")
	},
	{
		title: "物料列表",
		url: "/materials",
		icon: require("@/assets/標簽列表.png")
	},
	{
		title: "成員管理",
		url: "/corpuser",
		icon: require("@/assets/員工列表.png")
	},
	{
		title: "收益概覽",
		url: "/income",
		icon: require("@/assets/員工列表.png")
	},
	{
		title: "價格配置",
		url: "/price",
		icon: require("@/assets/員工列表.png")
	},
	{
		title: "系統(tǒng)設置",
		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('點擊',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”)為導航圖標，需要注意，如果不用require，直接寫圖片的地址的話可能出現(xiàn)無法找到圖片的問題，圖片的地址在html中使用時會被轉(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為前面的導航代碼

路由設置

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