解決Vue router-link綁定事件不生效的問(wèn)題
解決方法：加native
<router-link to="/date" @click.native="nav_click">最新</router-link>
methods: {
nav_click: function() {
console.log(1)
}
}
解釋：
1： 因?yàn)樗亲远x標(biāo)簽，根本就沒(méi)有事件和方法，所以不觸發(fā)，加個(gè)native 就是告訴vue 這個(gè)標(biāo)簽現(xiàn)在有主了 它是H5標(biāo)簽 可以加事件了。
2：父組件要想在子組件監(jiān)聽(tīng)自己的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)上搜的其他的代碼截圖，整體沒(méi)毛病，聲明并導(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
深入探討Vue計(jì)算屬性與監(jiān)聽(tīng)器的區(qū)別和用途
在Vue的開(kāi)發(fā)中,計(jì)算屬性（Computed Properties）和監(jiān)聽(tīng)器（Watchers）是兩種非常重要的概念,它們都用于響應(yīng)式地處理數(shù)據(jù)變化,本文將帶你深入了解計(jì)算屬性和監(jiān)聽(tīng)器的區(qū)別,以及在何時(shí)使用它們,感興趣的朋友可以參考下2023-09-09
今天小編就為大家分享一篇淺談vue中組件綁定事件時(shí)是否加.native，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
video.js是一個(gè)擁有h5背景的網(wǎng)絡(luò)視頻播放器，同時(shí)支持h5以及Flash視頻播放，這篇文章主要介紹了vue中使用video.js進(jìn)行視頻播放,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關(guān)知識(shí)，整合了第三方j(luò)query 插件select2,具體實(shí)例代碼大家參考下本文2018-04-04
vue使用vant中的checkbox實(shí)現(xiàn)全選功能
這篇文章主要為大家詳細(xì)介紹了vue使用vant中的checkbox實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線預(yù)覽實(shí)戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線預(yù)覽實(shí)戰(zhàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)
前后端分離的項(xiàng)目，遇到了對(duì)密碼進(jìn)行加密的情況，在前端或者是在后端加密都是可以的，本文主要介紹了Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue.js 動(dòng)態(tài)為img的src賦值方法
下面小編就為大家分享一篇Vue.js 動(dòng)態(tài)為img的src賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09