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

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

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

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

 <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>