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.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"><inputtype="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"><divclass="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"><sectionv-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"><divv-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>