在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>