Vue <router-link>标签绑定@click点击事件失败

2023-10-31

失败原因

router-link标签本身会阻止click事件,使用常规的@click绑定点击事件自然会失败。


解决方案

@click之后添加native修饰符。

<router-link to="/home" @click.native="changeRoute('home')">
    首页
</router-link>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue <router-link>标签绑定@click点击事件失败 的相关文章

  • Vue如何将数据显示在页面中

    如何将data的数据显示在页面中 1 文本插值 div msg div 渲染结果 div hello world div 2 原始HTML插值 v html v text 区别 v text不会对标签进行转义而v html会对标签进行一次转
  • Vue (三) 生命周期--钩子函数

    生命周期 Vue官网生命周期的描述 钩子函数 1 beforeCreate 创建Vue实例化之前所调用的函数 div h1 message h1 div
  • 生产环境的域名地址与后端给的接口地址不一样时的配置(vue)

    1 找到 config dev env js 文件 module exports merge prodEnv NODE ENV development API ROOT http com 本地开发时用的域名 2 找到 config prod
  • vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

    vue3使用import meta env在vite config ts下使用env环境变量的方法 编程一枚的博客 CSDN博客
  • Vue + Element UI 前端篇(十一):第三方图标库

    Vue Element UI 实现权限管理系统 前端篇 十一 第三方图标库 使用第三方图标库 用过Elment的同鞋都知道 Element UI提供的字体图符少之又少 实在是不够用啊 幸好现在有不少丰富的第三方图标库可用 引入也不会很麻烦
  • Vue 组件化

    什么是组件化 任何一个人处理信息的逻辑能力都是有限的 所以 当面对一个非常复杂的问题时 我们不太可能一次性搞定一大堆的内容 但是 我们人有一种天生的能力 就是将问题进行拆解 如果将一个复杂的问题 拆分成很多个可以处理的小问题 再将其放在整体
  • 值得收藏的UmiJS 教程

    点击上方关注 前端技术江湖 一起学习 天天进步 前言 网上的umi教程是真的少 很多人都只写了一点点 很多水文 所以打算自己写一篇 自己搭建umi 并封装了一下常用的功能 并用到公司实际项目中 umi介绍 Umi 是什么 Umi 中文可发音
  • vue父子组件通信方式哪几种

    第一种 props和 emit parent vue
  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试
  • 8.全配置自动生成模块前后端

    文章目录 学习资料 配置式开发全新的模块 快速实现 字典管理 代码生成器详细属性设置 全智能模块开发 查询调整 多表连接 药品模块 生产厂家下拉框 学习资料 https www bilibili com video BV13g411Y7GS
  • c# asp.net学院学生档案管理系统 计算机毕设源码59121

    摘 要 随着互联网大趋势的到来 社会的方方面面 各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去 而其中最好的方式就是建立网络管理系统 并对其进行信息管理 由于现在网络的发达 学生档案信息通过网络进行管理掀起了热潮 所以针
  • vue_域名部署无法访问后端

    前言 目前部署的比较另类 因为服务器为 windows 目前还不是很会 nginx 所以现在就只能在服务器上安装 nodejs 然后直接使用 npm run dev 命令行的方式运行项目 遇到的坑 使用ip访问前端的时候 就可以访问 但是通
  • 快速入手 vue3 defindeModel 双向绑定数据,赶快了解下

    彩蛋 在vue3 3x 版本中 官方 RFC 放出了 一个新特性 defineModel 它将让我们在自定义组件上双向绑定数据更加快捷 举个 以前我们父子组件双向数据绑定要在子组件里声明对应的props emts computed 子组件
  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外
  • 黑豹程序员-自定义表单实现门户自定制

    功能 用户可以实现欢迎页面自己定制 数据由数据库表进行维护 原理 页面利用div进行布局 拖动div记录其坐标 并写库 页面加载时从数据库表中读取div坐标和数据即可 效果图
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • Vue3+Echarts:堆积柱状图的绘制

    一 需求 在Vue3项目中 想用Echarts来绘制堆积柱状图 去展示最近一周APP在不同渠道的登录人数 效果如下 二 实现 关于Echarts的下载安装以及图表的样式设计 此处不展开 1 Templates部分
  • 【vue】$bus 跨组件调用方法

    1 新建bus js import Vue from vue 使用 Event Bus const bus new Vue export default bus 2 main js引用 import bus from libs bus Vu
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码

随机推荐

  • 华为OD机试 - 最长的完全交替连续方波信号(Java)

    题目描述 输入一串方波信号 求取最长的完全连续交替方波信号 并将其输出 如果有相同长度的交替方波信号 输出任一即可 方波信号高位用1标识 低位用0标识 如图 说明 一个完整的信号一定以0开始然后以0结尾 即010是一个完整信号 但101 1
  • 选Redis做MQ的人,是脑子里缺根弦儿吗?

    V xin ruyuan0330 获得600 页原创精品文章汇总PDF 目录 一 前情提示 二 unack消息的积压问题 三 如何解决unack消息的积压问题 四 高并发场景下的内存溢出问题 五 低吞吐量问题 六 合理设置prefetch
  • 数据库查询出结果后将时间排序后取第一条

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 查询出结果后将时间排序后取第一条 select from a where time lt 2017 03 29 19 30 36 order by time desc li
  • Hive 表操作(HIVE的数据存储、数据库、表、分区、分桶)

    1 Hive的数据存储 Hive的数据存储基于Hadoop HDFS Hive没有专门的数据存储格式 存储结构主要包括 数据库 文件 表 试图 Hive默认可以直接加载文本文件 TextFile 还支持sequence file 创建表时
  • windows11 打开chrome浏览器闪屏黑屏问题

    windows11 家庭版打开chrome浏览器的时候 电脑闪屏 甚至长时间黑屏 不得不重启 修复方法 在Google Chrome中禁用 平滑滚动 1 打开chrome 然后输入在地址栏输入 chrome flags 2 搜索名为Smoo
  • 8招搞定XenServer虚拟机优化

    XenServer是一款虚拟机软件 他的免费版本功能相对强大 相比VMware的ESXi来说 所以现在很多企业简单应用上都会用这款软件 以减小开支 VMware收费实在是太贵了 一般的企业是承担不起的 一般虚拟化之后 一台宿主机上面都会运行
  • 也说MSDN

    看到iCynosure在介绍 MSDN使用经验 忍不住也进来加两句 平时很喜欢在IE里面用alt D来切换到地址栏 但是MSDN Explorer不支持这个快捷方式 经过一番研究发现可以通过Option里面的keyboard来自定义快捷键
  • react基础04--redux 管理数据

    react基础04 redux 管理数据 1 介绍 2 方法 案例 在多个组件中使用Store中的数据 规范 store 写法 修改Store中的数据 refs属性获取元素对象 redux thunk 中间件 3 注意事项 4 说明 1 介
  • 怎么在蓝桥杯多拿点分

    蓝桥杯常考的算法有 1 枚举 暴力 2 递归 3 贪心 4 搜索 dfs和bfs 等基础算法 难度比较大的是动态规划 严格按要求输出 不要画蛇添足地打印类似 请您输入 的多余内容 能用到的函数 比如sort next permutation
  • Matplotlib可视化(2)设置pyplot的rcParams

    pylot使用rc配置文件来自定义图形的各种默认属性 称之为rc配置或rc参数 通过rc参数可以修改默认的属性 包括窗体大小 每英寸的点数 线条宽度 颜色 样式 坐标轴 坐标和网络属性 文本 字体等 rc参数存储在字典变量中 通过字典的方式
  • 2.线程常见方法

    Java多线程文章目录 目录 设置优先级 join方法 sleep方法 sleep 实现秒表功能 常见面试题 setDaemon方法 设置优先级 同优先级别的线程 采取的策略就是先到先服务 使用时间片策略 如果优先级别高 被CPU调度的概率
  • Clion-安装

    Clion安装 1 注册Jetbraions账号 https www jetbrains com 2 学生认证使用 baipiao 一年 https www jetbrains com shop eform students 3 下载Min
  • Postman提取返回值

    json响应结果 Postman是做接口测试的 但是很多接口并不是直接就能测试的 需要一些预处理 比如登录的时候 需要传递一个token 如果是网页测试 一般打开登录页面的时候就会自动生成一个token 如果返回的是json格式 用Post
  • 4 SpringBoot整合RocketMQ实现消息发送和接收

    我们使用主流的SpringBoot框架整合RocketMQ来讲解 使用方便快捷 最终项目结构如下 具体步骤如下 第一步 我们新建一个父项目rocketmq test pom类型 主要是依赖管理 包括版本的管理 以及管理module子项目 p
  • pygame库基础模块汇总

    目录 1 安装 2 使用 3 display显示模块 4 draw模块 5 event模块 event可以判断的事件 键盘事件key 6 font模块 7 time模块 8 基本框架 Pygame 是一个专门用来开发游戏的 Python 模
  • Qt+OpenGL——屏幕坐标转OpenGL归一化后的坐标

    OpenGL在显示图形时是将坐标转化为以屏幕中心为原点的一个坐标系 屏幕显示区域的x y轴的取值区间都是 1 1 如图 Qt界面的坐标系是以左上角为原点的坐标系 将鼠标点击的点转化为OpenGL坐标的算法较为简单 不再赘述直接以代码的形式进
  • 100个经典C语言程序(益智类)

    100个经典C语言程序 益智类 1 绘制余弦曲线 在屏幕上用 显示0 360度的余弦函数cos x 曲线 问题分析与算法设计 利用cos x 的左右对称性 将屏幕的行方向定义为x 列方向定义为y 则0 180度的图形与180 360度的图形
  • C语言中的指针的新认识(一)

    从开始学习C语言到现在遇到最难的问题始终是指针的问题 所以希望每次都有新的体会 然后再记录下来 能看到自己的成长 最近知道的一个新的体会 指针指向的是一个地址 所以指针所要给的值也是一个地址 所以有了这样一个值 int a 0 int p
  • 反向代理神器 Nginx Proxy Manager 快速部署(Docker-compose)

    快速部署 本文将使用 NginxProxyManager 中文版 介绍NginxProxyManager基于Docker compose的快速部分方法 GitHub xiaoxinpro nginx proxy manager zh Doc
  • Vue <router-link>标签绑定@click点击事件失败

    失败原因 router link标签本身会阻止click事件 使用常规的 click绑定点击事件自然会失败 解决方案 click之后添加native修饰符