解決方法：加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綁定事件不生效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。