在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.js或src/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>
![[图解]企业应用架构模式2024新译本讲解27-层超类型3](https://i-blog.csdnimg.cn/direct/1cb6ba3ce98c4dd5bcc0b6aa78c64dd6.png)
