vue-cli项目中，rouer-link点击后无效

最新推荐文章于 2022-11-10 13:09:27 发布
最新推荐文章于 2022-11-10 13:09:27 发布
阅读量430 收藏
点赞数
分类专栏： 奇葩问题集合 Vue 文章标签： vue-cli router-link 点击无效 router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32623363/article/details/89315636
版权

昨日，重构我的vue-cli项目，但是在使用router-link时发现，无论如何点击其都不起反应。

症状：

  • 鼠标左键点击无效
  • 鼠标移上后，（谷歌）浏览器左下角正常显示链接网址
  • 网页解析正常，<routetr-link>标签被解析成了a标签，且与正常a标签无异
  • console中无异常
  • 鼠标中建点击（新页面打开）能够正常打开其对应的网页

相关症状：

  • router-link 屏蔽掉了其自带的click事件，要使用则需要用 @click.native="xxx"（但是如果写成to.native会报异常）

重要发现：
在这里插入图片描述
当点击这个remove后，route-link就能正常使用了

推断：有哪个事件把它的点击事件屏蔽了，因此找到那个对应的时间并将其删除，即可！

然后我没找到那个事件~~~~
在这里插入图片描述

重要更新

我终于解决这个bug了！！
在main.js里面，一定要记得加上next()！！！
在这里插入图片描述

_吟游诗人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：https://github.com/Aleczhang1992/my-vue-project/tree/dev 一、步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度： npm install -g cnpm --registry=https://registry.npm.taobao.or
Vue router-link点击事件不生效
qq_39863541的博客
08-22 1313
在学习路由时，想给<router-link>加个点击事件，结果发现不生效，百度之后问题解决 贴个代码： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>命名视图</title> ...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个页面 watch-multi : 并行观看多个页面 你可以在你的项目中使用vue-cli-service [command] 初始化配置 如果你的项目没有对应的文件，命令会生成vue.config.js 、 Views.json文件 多建 该命令将在上面生成配置的位置构建您的条目，您可
官方的js路由router
weixin_40945354的博客
02-09 1021
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
vue router-link点击事件无效解决方法
前端恶霸
01-22 6718
在router-link上使用@click无效是因为router-link的作用是单纯的路由跳转会影响阻止点击事件，使用@click.native就可以了
router-link跳转失败（Vue router命名路由）
whtli的博客
01-21 7349
Vue router命名路由，router-link跳转失败解决方法
vue router-link点击事件失效 - Kaiqisan
Kaiqisan的博客
09-15 1294
简答 ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである , 今天解决一个忘记很久的一个问题，今天又重新遇到了，就顺便讲掉。 vue router-link点击事件失效 简答 这样不行 <router-link to="/app" @click="doClick"> 点击跳转 </router-link> 这样行 <router-link to="/app" @click.native="doClick"> 点击跳转 </ro
【Vue项目练习】router-link跳转失败原因
xptxhx的博客
11-10 3435
发现自己使用router-link想要传到/detail路径的时候需要带个params参数 总是自动跳转到我项目的首页
Vue2中注册在router-link上事件无效解决方法
thinkingw770s的博客
08-22 1451
今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发， 后来测试发现，所有绑定在router-link中的事件都不会促发 此后查看了官方的文档，也并没有给出明确的说明： 代码如下： &lt;router-link @click="change"&gt;&lt;span&gt;{{item.text}}&lt;/span&gt;&lt;/...
vue @click 在router-link 里面失效的问题的【已解决】
qq_43606316的博客
11-27 425
直接写@click 点击router-link getshow() 方法不执行 改成@click.native 后 getshow()执行 亲测有效
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果已经有了配置（确保配置PurgeCSS），则很有用。 最小（默认） -将创建一个最小...
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli 是vue.js的脚手架，用于快速自动生成vue.js+webpack的项目模板，这样大大降低了webpack的使用难度。下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装...
电源已接通，未充电——解决方案
热门推荐
吟游诗人——吟唱生命的不朽
03-12 8万+
笔记本出现这个问题已经很久了，之前我一直以为是电池坏了，遂买了块新电池，然仍然充不进去电，终于找到了正确解决方案。 首先，并不是电池坏了，因为如果电池坏了的话是会接通不了的，这时候你可以试试把电池拔了开机，显示的并不相同，那样会显示检测不到电源。 然后坏掉的地方可能是主板、适配器，或者什么都没坏 如果是硬件损坏那就只能拿去修了，然而如果什么都没坏，又是为什么呢？ 如果是一些软件为了保护电池...
LaTeX表格中\multirow的使用
吟游诗人——吟唱生命的不朽
09-21 3万+
有时候在latex的表格中，如果一段文字跨越多行时，往往会在另外的一行处加上\multirow，为何呢，不加的话表格内的内容超过一行了也会自动换行的呀。下面可以看一下对比。 如下图所示为LaTeX一个2列的列表的两行，上面一行没有加\multirow，而下面一行加了，那么实际效果如何呢？ 注意下图中A的位置！是不是发现使用了 \multirow的行的A是跨了4行的，因此\multirow不是用来...
Spring中使用@Autowired注解 对象是null
吟游诗人——吟唱生命的不朽
06-12 1万+
今天在做一个SSH集成的项目，但是在测试的时候，我在一个测试代码中使用了@AutoWired注解，想要从Spring配置文件中自动注入一个已经配置好的bean对象，但是在使用的时候却发现是Null，于是下面就是解决办法。 首先上错误代码： 我在一个测试类中创建了一个该类的对象，并调用该类的doLogin()方法，然后输出的内容是如图： 可以看到，它确实已经进行过注入的操作了，且可以发...
阿里云ip解封——ip白名单设置
吟游诗人——吟唱生命的不朽
01-28 1万+
近来学了点HACK技术，心血来潮之下就想实践一下。但是无端黑别人网站也不好，遂对自己部署在阿里云上的网站下手了 自作孽不可活，直接被阿里给拉入ip黑名单了。。 解封办法： 然后往里面添加自己的ip即可，不要填局域网ip，百度搜索ip即可。 往后黑网站还是自己在虚拟机内搭建环境吧
Unknown float option `H'. \begin{table}[H]
吟游诗人——吟唱生命的不朽
09-21 9009
LaTeX的表格在设置浮动时提示了如题所示错误，首先能肯定没写错，那么显然是少导了包。因此导入一个名为float的宏包即可。 在文档导言内加上如下代码即可： \usepackage{float} ...
算法时间复杂度符号分析——O、o、Ω、ω、Θ
吟游诗人——吟唱生命的不朽
03-01 8309
O（大O）：表示小于等于 o（小o）：表示小于 Ω（大欧米嘎）：大于等于 ω（小欧米嘎）：大于 Θ：等于
vue-cli项目 实战
最新发布
05-18
好的，下面我将为您介绍如何使用vue-cli创建一个基本的Vue.js项目。 1. 安装Node.js Vue.js是一个基于Node.js的框架，所以我们需要先安装Node.js。具体安装步骤可以参考官方文档：https://nodejs.org/ 2. 安装vue-cli 在Node.js安装完成之后，我们可以使用npm（Node.js的包管理器）来安装vue-cli。打开终端或命令行并输入以下命令： ``` npm install -g vue-cli ``` 3. 创建Vue.js项目 安装vue-cli完成后，我们可以使用它来创建一个Vue.js项目。在终端或命令行中输入以下命令： ``` vue init webpack my-vue-project ``` 其中，`webpack`是Vue.js使用的打包工具，`my-vue-project`是你的项目名称。运行该命令后，你会被要求输入一些项目配置信息，如项目名称、描述、作者等。根据自己的需求填写即可。 4. 安装依赖 项目创建完成后，我们需要进入项目的根目录并安装依赖。在终端或命令行中输入以下命令： ``` cd my-vue-project npm install ``` 5. 运行项目 安装依赖完成后，我们可以使用以下命令来启动项目： ``` npm run dev ``` 该命令会启动一个本地服务器，并在浏览器中打开一个新的页面。在该页面中，你将看到一个Vue.js的欢迎页面。现在你已经成功创建了一个基本的Vue.js项目，可以开始编写你自己的代码了！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值