快捷導(dǎo)航

解決Vue router-link綁定事件不生效的問(wèn)題

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

這篇文章主要介紹了解決Vue router-link綁定事件不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

解決方法：加native

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

解釋：

1：因?yàn)樗亲远x標(biāo)簽，根本就沒有事件和方法，所以不觸發(fā)，加個(gè)native 就是告訴vue 這個(gè)標(biāo)簽現(xiàn)在有主了它是H5標(biāo)簽可以加事件了。

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

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

補(bǔ)充知識(shí)：Vue router-link使用的坑

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

這是我src的項(xiàng)目目錄

這是router/index.js的代碼，雖然和網(wǎng)上搜的其他的代碼截圖，整體沒毛病，聲明并導(dǎo)出了Vue-router的實(shí)例

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在正式運(yùn)行時(shí)發(fā)出生產(chǎn)提示
 
 /* eslint-disable no-new */
 Vue.component
 new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',//在頁(yè)面引用
 })

到了關(guān)鍵點(diǎn)了測(cè)試使用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后面的用法

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

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

您可能感興趣的文章: