Vue和Element UI 路由跳转

在Vue.js中,使用Vue Router可以方便地实现页面之间的路由跳转。Element UI是一个基于Vue 2.0的桌面端组件库,它本身并不直接提供路由跳转的功能,但你可以在使用Element UI的Vue项目中结合Vue Router来实现这一功能。

以下是一个基于Vue和Element UI实现路由跳转的基本步骤:

1.安装Vue Router

如果你还没有安装Vue Router,首先需要安装它。在你的Vue项目目录中打开终端或命令提示符,然后运行以下命令:

npm install vue-router  
# 或者  
yarn add vue-router

2. 配置Vue Router

在Vue项目中,你需要在src目录下创建一个router文件夹,并在其中创建一个index.js文件来配置你的路由。以下是一个简单的示例:

// src/router/index.js  
  
import Vue from 'vue'  
import Router from 'vue-router'  
import Home from '@/components/Home'  
import About from '@/components/About'  
  
Vue.use(Router)  
  
export default new Router({  
  routes: [  
    {  
      path: '/',  
      name: 'Home',  
      component: Home  
    },  
    {  
      path: '/about',  
      name: 'About',  
      component: About  
    }  
  ]  
})

3. 在Vue实例中使用Vue Router

在你的Vue项目的入口文件(通常是src/main.jssrc/main.ts)中,确保你已经导入了Vue Router,并将其添加到Vue的实例中:

// src/main.js  
  
import Vue from 'vue'  
import App from './App.vue'  
import router from './router'  
  
new Vue({  
  router,  
  render: h => h(App),  
}).$mount('#app')

4. 使用Element UI组件触发路由跳转

现在,你可以在Vue组件中使用Vue Router的编程式导航功能(如this.$router.push)或声明式导航(<router-link>标签)来触发路由跳转。虽然Element UI本身不直接提供路由跳转组件,但你可以结合Vue Router的<router-link>标签或Vue实例的$router.push方法来在Element UI组件中实现路由跳转。

使用<router-link>
<template>  
  <el-button type="primary" @click="goToAbout">Go to About</el-button>  
  <!-- 或者使用router-link -->  
  <router-link to="/about" tag="el-button" type="primary">Go to About</router-link>  
</template>  
  
<script>  
export default {  
  methods: {  
    goToAbout() {  
      this.$router.push('/about');  
    }  
  }  
}  
</script>
<template>
	<div>
		<!--搜索框-->
		<div class="top-wrapper">
			<div class="search el-input el-input--suffix">
				<input
					type="text"
					autocomplete="off"
					placeholder="输入指标名称搜索"
					class="el-input__inner"
				/>
			</div>
		</div>
		<!--中部-->
		<div class="indicator-wrapper">
			<!--侧边栏   -->
			<div class="indicator-side">
				<a
					:class="{
						'indicator-category': true,
						'indicator-category-active': item.checked
					}"
					v-for="item in sideList"
					:key="item.id"
					@click.prevent="categoryClick(item)"
					href="#!"
				>
					{{ item.groupName }}
				</a>
			</div>
			<!--中间选择器   -->
			<div class="indicator-body">
				<div
					class="indicator-block"
					v-for="item in sideList"
					:key="item.id"
					:id="item.id"
				>
					<div class="indicator-group">
						<span class="indicator-title">{{ item.groupName }} </span>
					</div>
					<div class="el-row">
						<div class="el-col el-col-8" v-for="el in item.child" :key="el.id">
							<el-checkbox v-model="el.checked" class="el-checkbox__input el-checkbox"
								><span class="el-checkbox__label">{{ el.label }}</span></el-checkbox
							>
						</div>
					</div>
				</div>
			</div>
			<!--拖拽-->
			<div class="flex">
				<div class="indicator-drag">
					<div class="indicator-content">
						<div class="drag-title">已选指标</div>
						<div class="drag-sec">拖动可自定义指标顺序</div>
						<div class="indicator-limit_low">
							<div class="drag-block not-allow mg2">账号ID</div>
						</div>
						<div class="drag-sepreate">以上指标将横向固定</div>
					</div>
					<div class="indicator-limit-many" style="max-height: 445px">
						<section
							v-draggable="[
								drag,
								{
									animation: 150,
									ghostClass: 'ghost',
									group: 'people',
									onUpdate,
									onAdd,
									onRemove
								}
							]"
							class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
						>
							<div
								v-for="item in drag"
								:key="item.id"
								class="drag-block hover-class all-scroll mg2"
								@click="dragClick(item)"
							>
								{{ item.name }}
								<el-icon
									@click="removeItem(item.id)"
									style="
										float: right;
										align-items: center;
										position: relative;
										top: 8px;
									"
									class="mg-icon-close close"
								>
									<close />
								</el-icon>
							</div>
						</section>
						<div class="flex justify-between">
							<preview-list :list="drag" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { vDraggable } from "vue-draggable-plus";
import { Close } from "@element-plus/icons-vue";

const sideList = ref([
	{
		id: 1,
		groupName: "基本信息",
		child: [
			{
				prop: "uuid",
				label: "账号ID"
			},
			{
				prop: "name",
				label: "名称",
			},
			{
				prop: "companyName",
				label: "公司名称",
			},
			{
				prop: "allBalance",
				label: "总余额",
			}
		]
	},
	{
		id: 2,
		groupName: "展现数据",
		child: [
			{
				prop: "updateTime",
				label: "消耗"
			},
			{
				prop: "summary.spent",
				label: "曝光量"
			},
			{
				prop: "summary.clickCount",
				label: "点击量"
			},
			{
				prop: "summary.downloadCount",
				label: "下载量"
			}
		]
	},
	{
		id: 3,
		groupName: "转化数据",
		child: [
			{
				prop: "summary.activateCount",
				label: "新增激活数"
			},
			{
				prop: "summary.registerCount",
				label: "游戏注册量"
			},
			{
				prop: "summary.formsubmitCount",
				label: "表单提交量"
			},
			{
				prop: "summary.normalActivateCount",
				label: "普通激活数"
			},
			{
				prop: "summary.backActivateCount",
				label: "自定义激活数"
			},
			{
				prop: "summary.backRegisterCount",
				label: "自定义注册量"
			},
			{
				prop: "summary.addDesktopCount",
				label: "加桌数"
			},
			{
				prop: "summary.customRetainCount",
				label: "自定义次留数"
			},
			{
				prop: "summary.gamePayCount",
				label: "游戏付费数"
			},
			{
				prop: "summary.customPayCount",
				label: "自定义付费数"
			},
			{
				prop: "summary.reactivation",
				label: "自定义拉活"
			},
			{
				prop: "summary.webPay",
				label: "网页购买"
			},
			{
				prop: "summary.gameAppointment",
				label: "游戏预约数"
			},
			{
				prop: "summary.buttonClick",
				label: "按钮点击量"
			},
			{
				prop: "summary.fastappPay",
				label: "快应用付费数"
			},
			{
				prop: "summary.personalizedEvents",
				label: "个性化事件数"
			}

		]
	},
	{
		id: 4,
		groupName: "转化数据(计费时间)",
		child: [
			{
				prop: "summary.activateC",
				label: "新增激活数(按计费时间)"
			},
			{
				prop: "summary.backActivateC",
				label: "自定义激活数(按计费时间)"
			},
			{
				prop: "summary.backRegisterC",
				label: "游戏注册量(按计费时间)"
			},
			{
				prop: "summary.addDesktopC",
				label: "加桌数(按计费时间)"
			},
			{
				prop: "summary.cDownloadCount",
				label: "下载数(按计费时间)"
			},
			{
				prop: "summary.customRetainC",
				label: "自定义次留数(按计费时间)"
			},
			{
				prop: "summary.gamePayC",
				label: "游戏付费数(按计费时间)"
			},
			{
				prop: "summary.customPayC",
				label: "自定义付费数(按计费时间)"
			},
			{
				prop: "summary.reactivationC",
				label: "自定义拉活(按计费时间)"
			},
			{
				prop: "summary.gameAppointmentC",
				label: "游戏预约数(按计费时间)"
			},
			{
				prop: "summary.firstDayRecoveryAdMonetizationC",
				label: "首日回收金额-广告变现(按计费时间)"
			},
			{
				prop: "summary.totalRecoveryAdMonetizationC",
				label: "累计回收金额-广告变现(按计费时间)"
			},
			{
				prop: "summary.firstDayRecoveryPaidRechargeC",
				label: "首日回收金额-充值付费(按计费时间)"
			},
			{
				prop: "summary.totalRecoveryPaidRechargeC",
				label: "累计回收金额-充值付费(按计费时间)"
			},
			{
				prop: "summary.cFastappPay",
				label: "快应用付费数(按计费时间)"
			},
			{
				prop: "summary.cPersonalizedEvents",
				label: "个性化事件数(按计费时间)"
			},
			{
				prop: "summary.cNormalActivateCount",
				label: "普通激活数(按计费时间)"
			},
			{
				prop: "summary.cCreditCount",
				label: "自定义授信数(按计费时间)"
			},
			{
				prop: "summary.cInstallDoneCount",
				label: "安装完成数(按计费时间)"
			},
			{
				prop: "summary.wechatgameRegisterC",
				label: "微信小游戏注册数(按计费时间)"
			},
			{
				prop: "summary.wechatgamePayC",
				label: "微信小游戏付费数(按计费时间)"
			},
			{
				prop: "summary.cReactivationRetentionCount",
				label: "拉活自定义次留数(按计费时间)"
			},
			{
				prop: "summary.creditCount",
				label: "自定义授信数(按转化时间)"
			},
			{
				prop: "summary.installDoneCount",
				label: "安装完成数(按转化时间)"
			},
			{
				prop: "summary.wechatgameRegisterCount",
				label: "微信小游戏注册数(按转化时间)"
			},
			{
				prop: "summary.wechatgamePayCount",
				label: "微信小游戏付费数(按转化时间)"
			},
			{
				prop: "summary.reactivationRetentionCount",
				label: "拉活自定义次留数(按转化时间)"
			},
			{
				prop: "summary.reserveCount",
				label: "日历预约数(按转化时间)"
			},
			{
				prop: "summary.taCount",
				label: "目标用户量(按转化时间)"
			},
			{
				prop: "summary.cTaCount",
				label: "目标用户量(按计费时间)"
			},
			{
				prop: "summary.payOneTimeCount",
				label: "应用付费次数(按转化时间)"
			},
			{
				prop: "summary.cPayOneTimeCount",
				label: "应用付费次数(按计费时间)"
			},
			{
				prop: "summary.payOneTimeAmount",
				label: "应用付费金额(按转化时间)"
			},
			{
				prop: "summary.cPayOneTimeAmount",
				label: "应用付费金额(按计费时间)"
			}
		]
	},
	{
		id: 5,
		groupName: "互动数据",
		child: [
			{
				prop: "summary.identifyCodeCount",
				label: "微信-识别二维码数"
			},
			{
				prop: "summary.addWechatMpaCount",
				label: "微信-添加微信数"
			},
			{
				prop: "summary.dialogueMpaCount",
				label: "微信-用户首次消息数"
			},
			{
				prop: "summary.oneDialogueCount",
				label: "有效咨询数"
			},
			{
				prop: "summary.firstDayRecoveryPaidCount",
				label: "游戏首日首次付费"
			}
		]
	},

]);

const categoryClick = (item) => {
	sideList.value.forEach((el) => (el.checked = false));
	item.checked = !item.checked;
	const element = document.getElementById( item.id);
	if (element) {
		element.scrollIntoView({ behavior: "smooth" });
	}
};

const count = ref(0);

const removeItem = (id) => {
	drag.value = drag.value.filter((item) => item.id != id);
};
// const domeRef = ref<HTMLElement | null>(null);
// const handleClick = (MouseEvent) => {
// 	e.preventDefault();
// };
//拖拽
const drag = ref([
	{
		id: 1,
		name: "账号ID"
	},
	{
		id: 2,
		name: "名称"
	},
	{
		id: 3,
		name: "账户主体"
	},
	{
		id: 4,
		name: "总余额"
	}
]);
const dragClick = (item) => {
	drag.value.forEach((el) => (el.checked = false));
	item.checked = !item.checked;
};

function onUpdate() {
	console.log("update");
}

function onAdd() {
	console.log("add");
}

function onRemove() {
	console.log("remove");
}
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar {
	overflow: hidden;
	height: 100%;
	position: static !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
	background-color: #409eff;
	//border-color: var(--el-checkbox-checked-input-border-color);
}
//隐藏滚动条
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: rgb(255, 255, 255, 0.2);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
//搜索框
.top-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.top-wrapper .search {
	width: 250px;
}

.el-input {
	position: relative;
	font-size: 14px;
}

.el-input__inner {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	outline: 0;
	padding: 0 15px;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	width: 100%;
	font-size: inherit;
	-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.el-dialog .el-dialog__body .el-input .el-input__inner {
	padding-left: 8px;
	color: #333;
}

.el-input .el-input__inner {
	height: 32px;
	line-height: 32px;
	border-radius: 2px;
}

//侧边栏
.indicator-side .indicator-category {
	padding-left: 16px;
	font-size: 14px;
	line-height: 40px;
	color: #333;
	cursor: pointer;
	display: block;
}

.indicator-side .indicator-category-active {
	color: #197afb;
	background-color: #d6eaff;
}

//中间基本信息
.indicator-block {
	padding: 16px 0 0 24px;
	border-bottom: 1px solid #eaebec;
}

.indicator-group {
	display: flex;
	justify-content: flex-start;
}

.indicator-title {
	margin-bottom: 16px;
	font-weight: 700;
	color: #333;
}

.el-checkbox__input.is-checked .el-checkbox__label {
	color: #409eff;
}

.el-checkbox__label {
	color: #333;
}

.el-checkbox__label,
.el-radio__label {
	font-size: 12px;
	color: #666;
}

.el-checkbox__label {
	display: inline-block;
	padding-left: 1px;
	line-height: 19px;
	font-size: 12px;
}

//拖拽
.indicator-drag .indicator-content {
	padding: 0 16px;
}

.indicator-drag .drag-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	color: #333;
}

.indicator-drag .drag-sec {
	margin: 8px 0;
	font-size: 12px;
	line-height: 100%;
	color: #999;
}
.indicator-drag .drag-sepreate {
	position: relative;
	margin: 16px 0 0;
	font-size: 12px;
	color: #999;
	text-align: center;
}

.indicator-drag .indicator-limit-many {
	max-height: 445px;
	padding: 0 16px;
	margin-top: 16px;
	overflow-x: hidden;
	overflow-y: auto;
}

.indicator-drag .mg2 {
	margin-bottom: 2px;
}

.indicator-drag .drag-block {
	position: relative;
	height: 40px;
	//width: 134px;
	padding: 0 30px 0 36px;
	overflow: hidden;
	line-height: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
	background-color: #fff;
	border-bottom: 1px solid #e8eaec;
}

.indicator-drag .drag-block .close {
	position: absolute;
	top: 13px;
	line-height: 100%;
	color: #cecece;
	cursor: pointer;
}

//滑动条
.infinite-list {
	width: 160px;
	height: 300px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.infinite-list .infinite-list-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding-left: 16px;
	font-size: 14px;
	background: #409eff;
	margin: 10px;
	color: #409eff;
}

.infinite-list .infinite-list-item + .list-item {
	margin-top: 10px;
}

//中部
.indicator-wrapper {
	display: flex;
	width: 832px;
	height: 516px;
	border: 1px solid #eaebec;
	border-radius: 4px;
}

//侧边栏
.indicator-side {
	flex-shrink: 0;
	width: 160px;
	overflow: auto;
	border-right: 1px solid #eaebec;
}

//选择器
.indicator-body {
	width: 672px;
	overflow: auto;
	scroll-behavior: smooth;
}

//右边
.indicator-drag {
	position: absolute;
	top: 0;
	right: 0;
	flex-shrink: 0;
	width: 216px;
	//height: 676px;
	padding: 25px 0;
	overflow: auto;
	background-color: #f8f8f9;
	border-right: 1px solid #eaebec;
}
</style>
相关推荐
aPurpleBerry44 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea