使用VueJS+iViewUI时$router.push点击卡片无响应问题求助

Hey there! Let's dig into why your Card's click isn't triggering the router navigation. I've dealt with similar quirks when working with UI component libraries, so here are the most likely fixes to try:

1. Use the .native Modifier for Native DOM Events #

iView's Card component is a wrapped Vue component, not a plain HTML element. By default, @click on a custom component listens for a custom click event emitted by the component—not the native DOM click event. Since the Card component doesn't emit a click event, your handler never runs.

Fix this by adding the .native modifier to listen for the native DOM click:

<Card :bordered="true" @click.native="$router.push('/my/cool/link')">
  <p slot="title">Card Title</p>
  <p>Card description</p>
</Card>

First, test this with a simple console log to confirm the event fires:

<Card :bordered="true" @click.native="console.log('Card clicked!')">
  <!-- ...card content -->
</Card>

If you see the log in your browser's dev tools, the event is working—then the router push should follow.

2. Verify Your Route Configuration #

Double-check that the path /my/cool/link is actually defined in your router setup. Open your router/index.js file and make sure there's a route entry like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import CoolLinkView from '../views/CoolLinkView.vue' // Adjust the path to your component

Vue.use(VueRouter)

const routes = [
  // ...your other routes
  {
    path: '/my/cool/link',
    name: 'CoolLink',
    component: CoolLinkView
  }
]

const router = new VueRouter({
  routes
})

export default router

If the path doesn't exist, $router.push will fail silently (unless you have a catch-all route set up).

3. Confirm the Router is Properly Injected #

Make sure your Vue app is properly initialized with the router. In your main.js file, you should have something like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)

new Vue({
  router, // Critical: injects the router into all child components
  render: h => h(App)
}).$mount('#app')

Without passing the router to the root Vue instance, this.$router (and the template $router) won't be available in your components.

4. Check for Event Propagation Blocking #

If none of the above work, inspect if any elements inside the Card are stopping event propagation. For example, if you added a button or link with @click.stop, it would prevent the click from reaching the Card's root element. Since your current code only has <p> tags, this is less likely—but it's worth checking if you modify the Card content later.

内容的提问来源于stack exchange，提问作者Brian Moreno