解决Vue router-link绑定事件不生效的问题


Posted in Javascript onJuly 22, 2020

解决方法:加native

<router-link to="/date" @click.native="nav_click">最新</router-link>
 
methods: {
 nav_click: function() {
  console.log(1)
 }
}

解释:

1: 因为它是自定义标签,根本就没有事件和方法,所以不触发,加个native 就是告诉vue 这个标签现在有主了 它是H5标签 可以加事件了。

2:父组件要想在子组件监听自己的click事件就得加native,router-link是标签啊。哪里有父组件????

router-link 其实就是一个封装好的 .vue 组件,所以需要 加.native修饰符才能绑定事件

补充知识:Vue router-link使用的坑

####最近上手VUE,整体配置全部使用默认的配置,但是Route-link就是不跳转

这是我src的项目目录

解决Vue router-link绑定事件不生效的问题

这是router/index.js的代码,虽然和网上搜的其他的代码截图,整体没毛病,声明并导出了Vue-router的实例

import Vue from 'vue'
 import Router from 'vue-router'
 import Main from '@/components/Main'
 import Attend from '@/components/Attend'
 
 Vue.use(Router)
 export default new Router({
 mode: 'history',
 routes: [
  {
   path: '/Main',
   name: 'Main',
   component: Main  
  },
  {
   path: '/Attend',
   name: 'Attend',
   component: Attend  
  },
  {
  path:'/',
  redirect:"Main"
  }
 ]
 })

这是main.js的代码,需要注意的是,import router这里不能修改成其他名字

import Vue from 'vue'
 import App from './App'
 import router from './router'
 
 Vue.config.productionTip = false;//阻止Vue在正式运行时发出生产提示
 
 /* eslint-disable no-new */
 Vue.component
 new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',//在页面引用
 })

到了关键点了测试使用router-link

<template>
  <div id="app">
   <AppHeader back="false" :title="title" />
   <div class="content">
    <router-view />
   </div>
   <ul>
     <li><router-link :to="{name:'Main'}">/</router-link></li>
     <li><router-link :to="{path:'/Attend'}">/foo</router-link></li>
     <li><router-link to="/">/bar</router-link></li>
   </ul>
  </div>
 </template>

找了好久才发现:to后面的用法

解决Vue router-link绑定事件不生效的问题

我一直出错的地方是在main.js中引入的Main和Attend包括了组件的全路径,当时跟着一个教程做的,然后我再声明path时直接写的是 path:‘/',我以为会直接找到,后来调试了好久才回过神来不对,需要改成path:'/Main',即对应的.vue才可以,小问题折腾了好久,记下来

以上这篇解决Vue router-link绑定事件不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 #Javascript
vue页面跳转实现页面缓存操作
Jul 22 #Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 #Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 #Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 #Javascript
vue 弹出遮罩层样式实例
Jul 22 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
ext 代码生成器
2009/08/07 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python高斯消除矩阵
2019/01/02 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
财产公证书样本
2014/04/04 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
回复函范文
2015/07/14 职场文书
服装店员工管理制度
2015/08/07 职场文书
golang中的空slice案例
2021/04/27 Golang
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL 数据表操作
2022/05/04 MySQL