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

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了解决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:父组件要想在子组件监听自己的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绑定事件不生效的问题就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板