Vue3点击侧边导航栏完成切换页面内组件(WEB)

news2025/7/9 10:06:56

Vue3点击侧边导航栏完成切换页面组件

目录

  • 效果
  • 思路
  • 过程
    • 获取当前点击DOM并添加点击class
    • 将其它的导航未点击项isclick样式类去除
  • 完整代码
    • 导航代码
    • 显示页面代码
    • 路由设置
  • 感谢

效果

在这里插入图片描述
点击左侧导航,右面页面切换。

思路

使用router-view显示点击后需要切换的组件,需要先完成网页的结构。侧面导航 + 页面显示部分
如:
导航加显示
设置一个class属性,点击元素时给当前元素额外添加一个class类。给导航中每个点击项添加上点击事件,当点击当前项时其它项的class变成原本的,当前元素添加一个当前点击的class类,而组件切换则由router完成,使用router-link to 完成路由路径切换。
当前点击模式类代码:

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

过程

获取当前点击DOM并添加点击class

这里需要注意,触发事件的元素对象(不一定是绑定事件的对象,会因为事件冒泡变化),所以我们需要获取绑定事件的元素对象。

$event:当前触发的是什么事件
$event.target:触发事件的元素对象(不一定是绑定事件的对象)
$event.currentTarget:绑定事件的元素对象

此处需要使用: e.currentTarget

改变选中元素的class: e.currentTarget.className = ‘nav-item isclick’
其中nav-item为未点击时的navitem样式类,isclick为点击后更改的样式类,原来样式只有一个nav-item,再添加一个isclick。

将其它的导航未点击项isclick样式类去除

  • 得到点击项的其它兄弟节点

    var domList = e.currentTarget.parentNode.children
    

    parentNode 是得到父节点
    children 是得到子节点
    当前元素的父节点的所有子节点,是一个列表

  • 将所有节点的点击样式类去除

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

    遍历当前所有节点的兄弟节点,并修改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: "系统设置",
		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,直接写图片的地址的话可能出现无法找到图片的问题,图片的地址在html中使用时会被转码,出现类似%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


感谢

以上,仅记录自己的解决办法,如您有更好的思路,欢迎在评论区留言
感谢点赞,如有帮助可以帮忙收藏关注,感谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406429.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp 改写uni-data-picker级联选择器(带搜索和多选)新增列出选择和删除功能

效果演示 注意&#xff1a;视频中的数据是模拟数据&#xff0c;请自行定义数据才可使用&#xff0c;数据格式末尾有例子 uniapp 改写uni-data-pickeruni-data-picker.vue更改 <template><view class"uni-data-tree"><view class"uni-data-tree…

【微信小程序】自定义组件(一)

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列文章又更新了呀。 今天牛牛带来的是微信小程序的自定义组件入门知识&#xff0c;赶紧拿起小本本做笔记呀&#xff01; 文章目录一&#xff0c;创建和引用1.1 …

若依数据分页功能的实现

目录 一、问题引出 二、原理分析&#xff1a; ①前端部分&#xff1a; ②后端部分&#xff1a; 三、总结 一、问题引出 我们可以注意到若依界面中处理大量数据时&#xff0c;一个页面展示不过来时&#xff0c;会采纳多页处理的方法。 此时我们拿若依里边的系统管理中的日志…

Umi4 从零开始实现动态路由、动态菜单

Umi4 从零开始实现动态路由、动态菜单&#x1f355; 前言&#x1f354; 前期准备&#x1f4c3; 数据表&#x1f917; Mock数据&#x1f517; 定义类型&#x1f388; 开始&#x1f383; 获取路由信息&#x1f9f5; patchRoutes({ routes, routeComponents})&#x1f4f8; 生成动…

第二十一篇 vue组件引入使用

这篇内容是关于组件在Vue中的引入和使用&#xff1b;什么是组件以及做组件化的开发&#xff0c;在Vue中&#xff0c;组件是构成页面中独立结构单元&#xff0c;能够减少重复代码的编写&#xff0c;提高开发效率&#xff0c;降低代码耦合度&#xff0c;便于维护和管理&#xff1…

前端请求中body和query传参

前端发送请求最常用的是get请求和post请求 get请求只能传query参数&#xff0c;query参数都是拼接在请求地址上的。 post可以传body和query两种形式的参数。 get请求在url中传送的参数是有长度限制的&#xff0c;而post没有限制。 get比post更不安全&#xff0c;因为参数直接…

十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全

&#x1f353; 作者主页&#xff1a;&#x1f496;仙女不下凡&#x1f496; &#x1f353; 前言介绍&#xff1a;以下&#x1f447;内容是我个人对于该技术的总结&#xff0c;如有不足与错误敬请指正&#xff01; &#x1f353;Echart官网地址&#xff1a;https://echarts.ap…

layui-icon各种常用动态图标

<buttonid"btnPrintDetail"class"<br/>layui-btnicon-btn"><iclass"<br/>layui-icon">&#xe66d;</i>明细打印</button> icon很多&#xff0c;选择起来纷繁复杂&#xff0c;罗列一点常用的&#xff0c;用…

uniapp scroll-view基础用法

前言 在uniapp日常开发的过程中经常会有局部滚动的需求&#xff0c;而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中&#xff0c;区域滚动的性能不及页面滚动。 纵向滚动 将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能&#xff0c;给scr…

【vue2】axios请求与axios拦截器的使用详解

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;当我们在路由跳转前与后我们可实现触发的操作 【前言】ajax是一种在javaScript代码中发请…

SAP ABAP——SAP简介(三)【S/4 HANA前端显示界面】

&#x1f482;作者简介&#xff1a; Thunder Wang&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言AB…

Ubuntu18.04安装Nvidia驱动【全网不坑,超全步骤】(亲测~)

Ubuntu18.04安装Nvidia驱动【全网不坑&#xff0c;超全步骤】亲测&#xff5e;为了方便以后回忆以及给像我一样的菜鸡提供思路&#xff0c;给出具体的步骤&#xff1a;No.1 查看自己的电脑显卡型号&#xff08;已知麻烦自动略过&#xff09;No.2 下载电脑对应的Nvidia版本驱动N…

Vue脚手架报错:‘v-model‘ directives require no argument 解决方案

1、报错&#xff1a; v-model directives require no argument 截图 2、原因&#xff1a; ESLint对vetur进行了eslint检查 3、解决方法 ① 修改模板中使用v-show 将 v-model:show"show" 改为 v-model"show" ② vetur插件的作者给出了解决办法 我们可…

【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz

文章目录前言特点一、Hello Viz1. 创建项目2. 引入viz3. 运行Hello Viz4. 运行结果注意二、Hello Viz代码详解导入组件处理请求主函数三、常见用法简单的处理程序实现处理程序特质路由传参链式组合程序中间件参数接收器路由一个简单的路由CRUD操作资源总结前言 Viz&#xff0c…

TS的类型声明

目录 1.TS把JS变成了静态类型的语言&#xff0c;可以给变量指定类型 2.JS中的函数是不考虑参数的类型和个数的&#xff0c;但是TS会考虑函数的参数类型和个数&#xff0c;且要规定返回值类型。 3.常见的TS类型 1.可以直接使用字面量进行类型声明 字面量声明的应用:可以使用…

讲解HTML和CSS(超详细)

讲解HTML和CSS&#xff08;超详细&#xff09;一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结提示&#xff1a;以下是我的一些经验之谈&#xff0c;下面案例可供参考 一、初始HTML和CSS 1.html的…

手撕前端面试题【javascript~ 总成绩排名、子字符串频次统计、继承、判断斐波那契数组等】

前端JavaScript面试题&#x1f353;&#x1f353;总成绩排名&#x1f353;&#x1f353;子字符串频次&#x1f353;&#x1f353;继承&#x1f353;&#x1f353;判断斐波那契数组&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的…

Vue中的过滤器(filter)

一、Vue中的过滤器是什么 过滤器&#xff08;filter&#xff09;是输送介质管道上不可缺少的一种装置,大白话&#xff0c;就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据&#xff0c;只是对数据进行加工处理后返回过滤后的数据再进行调用处理&#xff0c;我们也可以理…

Java利用fastjson解析复杂嵌套json字符串、json数组;json字符串转Java对象,json数组转list数组

文章目录前言一、什么是JSON对象&#xff1f;二、什么是json字符串&#xff1f;二、什么是JSON数组&#xff1f;三、复杂、嵌套的json字符串四、json字符串转换4.1 简单json字符串转换为java对象4.2 简单json字符串数组转换为list数组4.3 复杂嵌套json字符串数组转换为Java对象…

十大常用web前端UI组件库,赶紧收藏

今天主要介绍web前端常用的UI库&#xff0c;这些网站基本都是背靠互联网大厂&#xff0c;值得web前端开发者收藏&#xff0c;当然还是要多多学习使用。 Vant 一款有赞出品轻量、可靠的的移动UI组件库&#xff0c;目前支持 Vue2、Vue3、React&#xff0c;微信和支付宝小程序&a…