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

2024-08-21 00:09:55

解决方法：加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的项目目录

这是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后面的用法

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

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

解决VUE双向绑定失效的问题

双向绑定失效的原因有很多. lz就说最近遇到的. 是的,单价下的那个输入框我用了双向绑定(比如叫price,比如100).然后ipnut 键入中文时,(即使我做了输入验证).回车时虽然框中不会保留中文,但事实上VUE的双向绑定已经失效了.不管你后面输入什么,绑定的price保存的值只会是中文前的那个值(100). 这样就导致表面好像没事,但是当你提交时就数据不对了. 还有一种是. 是日期控件(bootstrap的)的问题,部分控件才会.mmp哦,当lz用这个空间选定日期时.以为美滋滋的一次搞定
Vue Router 实现动态路由和常见问题及解决方法

个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现
解决vue+router路由跳转不起作用的一项原因

如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',
解决VUE-Router 同一页面第二次进入不刷新的问题

最近正好遇到一个问题,修改用户的头像,修改后再进入用户主页,发现改了之后即使数据变了..页面也不会重新渲染... 下面提供几种解决方案来给予大家参考: 1. 可以在刷新的页面定义一个参数, 这样每次都会渲染出不同的页面: route 实例化命名配置: { // 用户信息 path: '/accountDetail/:randKey', name: 'accountDetail', component: accountDetail, meta: {requiresAuth: true} }, 跳转
解决VUE框架导致绑定事件的阻止冒泡失效问题

前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self
解决Vue router-link绑定事件不生效的问题

解决方法:加native <router-link to="/date" @click.native="nav_click">最新</router-link> methods: { nav_click: function() { console.log(1) } } 解释: 1: 因为它是自定义标签,根本就没有事件和方法,所以不触发,加个native 就是告诉vue 这个标签现在有主了它是H5标签可以加事件了. 2:父组件要想在子组件监听
jquery绑定事件不生效的解决方法

今天在开发前台页面时发现jquery绑定click事件,怎么都不生效.代码如下: 1.html:<input id="ceshisub" type="button" value="单击事件" > 2.html引用的test.js中的方法函数: 复制代码代码如下: $("#ceshisub").bind("click",function(){ var a=1; a +=1; alert(&quo
解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路
解决vue router组件状态刷新消失的问题

场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据.但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有'params: res.data'信息,主页无法获取到登录信息. 解决方案: 1.session&服务器渲染传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页
解决vue+element 键盘回车事件导致页面刷新的问题

背景今天发现输入框输入内容后回车就会刷新页面解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定: When there is only one single-line text input field in a form, the user agent
解决vue组件中click事件失效的问题

最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&
浅谈vue中组件绑定事件时是否加.native

组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template>  <input type="text" @keyup.native="show($event)
解决vue change阻止默认事件问题

背景:复选框内部有个数量增减选项,并且两个都是change事件.当触发内部数量增减事件时,外部的复选change事件也会触发,体验很不好. 使用事件 @click.stop.native.prevent 解决 (使用@click.stop 或者 @click.prevent都无效,直接报错还阻止不了事件) <el-checkbox-group v-model="checked_list" @click.stop @change=checkedFn> <el-check

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

相关推荐

随机推荐