解決Vue router-link綁定事件不生效的問題
解決方法：加native
<router-link to="/date" @click.native="nav_click">最新</router-link>
methods: {
nav_click: function() {
console.log(1)
}
}
解釋：
1： 因為它是自定義標(biāo)簽，根本就沒有事件和方法，所以不觸發(fā)，加個native 就是告訴vue 這個標(biāo)簽現(xiàn)在有主了 它是H5標(biāo)簽 可以加事件了。
2：父組件要想在子組件監(jiān)聽自己的click事件就得加native，router-link是標(biāo)簽啊。哪里有父組件？？？？
router-link 其實就是一個封裝好的 .vue 組件，所以需要 加.native修飾符才能綁定事件
補充知識：Vue router-link使用的坑
####最近上手VUE，整體配置全部使用默認(rèn)的配置，但是Route-link就是不跳轉(zhuǎn)
這是我src的項目目錄
這是router/index.js的代碼，雖然和網(wǎng)上搜的其他的代碼截圖，整體沒毛病，聲明并導(dǎo)出了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包括了組件的全路徑，當(dāng)時跟著一個教程做的，然后我再聲明path時直接寫的是 path：‘/',我以為會直接找到，后來調(diào)試了好久才回過神來不對，需要改成path:'/Main',即對應(yīng)的.vue才可以，小問題折騰了好久，記下來
以上這篇解決Vue router-link綁定事件不生效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下2022-10-10
今天小編就為大家分享一篇關(guān)于詳解vue-router導(dǎo)航守衛(wèi)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧2023-10-10
本文主要介紹了vue實現(xiàn)input輸入模糊查詢的三種方式嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明詳解
在Vue3中箭頭函數(shù)被廣泛支持,尤其是在組合式API的上下文中,這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue 實現(xiàn)樹形視圖數(shù)據(jù)功能,利用簡單的樹形視圖實現(xiàn)的，在實現(xiàn)過程中熟悉了組件的遞歸使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
因為近日在學(xué)習(xí)并使用VUE,客戶有一個要求,要輸入框可模糊查詢并帶有下拉提示的應(yīng)用,數(shù)據(jù)從接口取,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)模糊查詢filter()的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue swipe自定義組件實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Vue.js第一天學(xué)習(xí)筆記（數(shù)據(jù)的雙向綁定、常用指令）
這篇文章主要為大家分享了Vue.js第一天的學(xué)習(xí)筆記，包括數(shù)據(jù)的雙向綁定、常用指令學(xué)習(xí),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12