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

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

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

相关文章

Proxyman for Mac v5.6.1 抓包调试工具

Mac分享吧 文章目录 效果一、下载软件二、功能三、开始安装1、双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功 四、运行测试1、打开软件 安装完成&#xff01;&#xff01;&#xff01; 效果 一…

【华为OD笔试】2024D卷命题规律解读【分析300+场OD笔试考点总结】

可上 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1441了解算法冲刺训练&#xff08;备注【CSDN】否则不通过&#xff09; 文章目录 相关推荐阅读华为OD笔试2024D卷命题规律解读华为OD算法/大厂面试高频题算法练习冲刺训练 相关推荐阅读 【华为OD笔试】2024D卷机考套题…

C# Opencv实现本地以图搜图

地址&#xff1a;冯腾飞/本地以图搜图

Java面试八股之Redis哨兵机制

Redis哨兵机制 Redis Sentinel&#xff08;哨兵&#xff09;模式是一种高可用解决方案&#xff0c;用于监控和自动故障转移Redis主从集群。以下是对哨兵模式详细过程的描述&#xff1a; 1. 初始化与配置 部署哨兵节点&#xff1a;在不同的服务器上部署一个或多个Redis Sentin…

《算法笔记》总结No.7——二分(多例题详解版)

一.二分查找 目前有一个有序数列&#xff0c;举个例子&#xff0c;假设是1~1000&#xff0c;让我们去查找931这个数字&#xff0c;浅显且暴力的做法就是直接从头到尾遍历一遍&#xff0c;直到找到931为止。当n非常大&#xff0c;比如达到100w时&#xff0c;这是一个非常大的量级…

Linux 线程初步解析

1.线程概念 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列。在linux中&#xff0c;由于线程和进程都具有id,都需要调度等等相似性&#xff0c;因此都可以用PCB来描述和控制,线程含有PCB&am…

美联储降息应该更早?高盛:有充分理由7月降息,而非9月

KlipC报道&#xff1a;高盛首席经济学家哈祖斯Jan Hatzius表示&#xff0c;美联储“有充分理由”在7月会议上降息&#xff0c;而非等到9月。 在最新发布的报告中&#xff0c;他表明通胀已经取得了足够的进展&#xff0c;回到了美联储2%的长期目标附近&#xff0c;这将使美联储…

实现将Nginx的每个网站配置单独的访问日志

一、问题描述 Nginx默认的访问日志是不会区分哪个网站有哪些日志的,全部糅杂在一起;如果需要哪个网站有哪些访问日志记录,还需要将访问日志下载下来后筛选,比较麻烦;希望将每个网站对应的日志能够单独记录到对应的日志文件里面,方便排查和管理。 # 进入Nginx默认的日志文…

Nest.js 实战 (一):使用过滤器优雅地统一处理响应体

前言 在我们实际的业务开发中&#xff0c;我们可以看到后端接口返回格式都有一定的要求&#xff0c;假如我们统一规定接口的统一返回格式为&#xff1a; {data: any; // 业务数据code: number; // 状态码msg: string; // 响应信息timestamp: number; // 时间戳 }那么在 Nest.…

【智能算法改进】改进的麻雀搜索算法及其求解旅行商问题

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.改进点 改进发现者更新位置 为了使 SSA 算法能够避开向原点收敛的弊端, 将算法向最优位置跳跃的操作转换为向最优位置的移动: X i ,…

自己动手写一个滑动验证码组件(后端为Spring Boot项目)

近期参加的项目&#xff0c;主管丢给我一个任务&#xff0c;说要支持滑动验证码。我身为50岁的软件攻城师&#xff0c;当时正背着双手&#xff0c;好像一个受训的保安似的&#xff0c;中规中矩地参加每日站会&#xff0c;心想滑动验证码在今时今日已经是标配了&#xff0c;司空…

一个篇文章告诉你一个APP前端搭建有多简单

用uni-app 1.新建uni-app项目 点击项目 2.创建 最后点击右下方创建 3.添加tarbar 首先你要创建几个页面这里比如说我有两个页面的tarbar首页(home)和我的(userIndex) 在pages目录下右键新建页面即可

从库存超卖问题分析锁和分布式锁的应用(二)

本文从一个经典的库存超卖问题分析说明常见锁的应用&#xff0c;假设库存资源存储在Redis里面。 假设我们的减库存代码如下&#xff1a; Autowired StringRedisTemplate redisTemplate;public void deduct(){String stock redisTemplate.opsForValue().get("stock"…

JavaSE从零开始到精通

1.前置知识 JVM&#xff1a;java virtrual machine, java虚拟机, 专门用于执行java代码的一款软件。JRE&#xff1a;java runtime enviroment, java运行时环境, java官方提供的核心类库. jre中包含了核心类库和jvm。JDK: java development kit, java开发工具包, javac.exe, ja…

LVS+Keepalive高可用

1、keepalive 调度器的高可用 vip地址主备之间的切换&#xff0c;主在工作时&#xff0c;vip地址只在主上&#xff0c;vip漂移到备服务器。 在主备的优先级不变的情况下&#xff0c;主恢复工作&#xff0c;vip会飘回到住服务器 1、配优先级 2、配置vip和真实服务器 3、主…

我想做信号通路分析,但我就是不想学编程

“我想做信号通路分析&#xff0c;但我就是不想学编程。” “我又不是生信狗&#xff0c;学代码会死。” “你们这些做生信的&#xff0c;整天把数据分析搞得神神秘秘&#xff0c;不就是怕被人抢饭碗而已嘛。” “这都没分析出我想要的结果&#xff0c;不靠谱。” “你们做…

【自学安全防御】二、防火墙NAT智能选路综合实验

任务要求&#xff1a; &#xff08;衔接上一个实验所以从第七点开始&#xff0c;但与上一个实验关系不大&#xff09; 7&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 8&#xff0c;分公司设备可以通过总…

Java爬虫安全策略:防止TikTok音频抓取过程中的请求被拦截

摘要 在当今互联网时代&#xff0c;数据采集已成为获取信息的重要手段。然而&#xff0c;随着反爬虫技术的不断进步&#xff0c;爬虫开发者面临着越来越多的挑战。本文将探讨Java爬虫在抓取TikTok音频时的安全策略&#xff0c;包括如何防止请求被拦截&#xff0c;以及如何提高…

Andriod Stdio新建Kotlin的Jetpack Compose简单项目

1.选择 No Activity 2.选择kotlin 4.右键选择 在目录MyApplication下 New->Compose->Empty Project 出现下面的画面 Finish 完成

C++——类和对象(中)

文章目录 一、类的默认成员函数二、构造函数三、析构函数四、拷⻉构造函数五、赋值运算符重载1. 运算符重载2. 赋值运算符重载 六、取地址运算符重载const成员函数取地址运算符重载 七、应用&#xff1a;⽇期类实现Date.hDate.cpptest.cpp 一、类的默认成员函数 默认成员函数就…