router-link 綁定事件不生效

在vue中綁定事件是一下這種方法:javascript

v-on:click='函數名稱';vue

@click = '函數名稱';java

這兩種寫法都是正常。vue-router

可是咱們使用了 vue-router 路由時會使用 <router-link> 標籤來代替 a 標籤跳轉。咱們在 vue-router 標籤綁定 @click 事件 。函數

 <router-link to="/date" @click="nav_click">最新</router-link>

methods: {
 nav_click: function() {
       console.log(1)
 }
}

卻發現函數並無執行。這是怎麼回事。。。  router

加 .native 修飾符就能夠執行事件了。blog

 <router-link to="/date" @click.native="nav_click">最新</router-link>

methods: {
 nav_click: function() {
       console.log(1)
 }
}  

解釋:事件

1: 由於它是自定義標籤,根本就沒有事件和方法,因此不觸發,加個native 就是告訴vue 這個標籤如今有主了 它是H5標籤 能夠加事件了。ip

2:父組件要想在子組件監聽本身的click事件就得加native,router-link是標籤啊。哪裏有父組件???? 路由

 羣裏大佬一句說明了緣由 router-link  其實就是一個封裝好的 .vue 組件,因此須要 加.native修飾符才能綁定事件

相關文章
相關標籤/搜索