解決Vue router-link綁定事件不生效的問題

更新時間：2020年07月22日 14:30:30 作者：shizhenweiszw

這篇文章主要介紹了解決Vue router-link綁定事件不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

解決方法：加native

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

解釋：

1：因為它是自定義標簽，根本就沒有事件和方法，所以不觸發(fā)，加個native 就是告訴vue 這個標簽現(xiàn)在有主了它是H5標簽可以加事件了。

2：父組件要想在子組件監(jiān)聽自己的click事件就得加native，router-link是標簽啊。哪里有父組件？？？？

router-link 其實就是一個封裝好的 .vue 組件，所以需要加.native修飾符才能綁定事件

補充知識：Vue router-link使用的坑

####最近上手VUE，整體配置全部使用默認的配置，但是Route-link就是不跳轉(zhuǎn)

這是我src的項目目錄

這是router/index.js的代碼，雖然和網(wǎng)上搜的其他的代碼截圖，整體沒毛病，聲明并導出了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在正式運行時發(fā)出生產(chǎn)提示
 
 /* eslint-disable no-new */
 Vue.component
 new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',//在頁面引用
 })

到了關(guān)鍵點了測試使用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>

找了好久才發(fā)現(xiàn)：to后面的用法

我一直出錯的地方是在main.js中引入的Main和Attend包括了組件的全路徑，當時跟著一個教程做的，然后我再聲明path時直接寫的是 path：‘/',我以為會直接找到，后來調(diào)試了好久才回過神來不對，需要改成path:'/Main',即對應的.vue才可以，小問題折騰了好久，記下來

以上這篇解決Vue router-link綁定事件不生效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: