Vue与Ionic项目中内部组件内li元素路由跳转的Router Link配置问题

Got it, let's get those lesson links working properly. The reason plain Vue Router <router-link> isn't playing nice here is because Ionic has its own optimized navigation system—using its native components will ensure smooth animations, proper active states, and seamless integration with your Ionic UI. Here are two solid solutions to make your lesson items navigate to the target pages:

Option 1: Use Ionic's <ion-router-link> (Recommended) #

Ionic provides <ion-router-link> specifically for navigation in Vue projects—it’s built to work with Ionic’s layout and routing system.

Option 1a: Replace <li> with Ionic's <ion-item> (Most Ionic-idiomatic) #

This fits perfectly with Ionic's design system and gives you built-in list styling out of the box. Update your <yt-course-card> component like this:

<ion-card>
  <ion-card-header>
    <ion-card-title>{{ name }}</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ion-list> <!-- Wrap items in ion-list for proper spacing/styling -->
      <ion-item 
        v-for="lesson in lessons" 
        :key="lesson.slug" <!-- Use slug as unique key (better than the whole lesson object) -->
        :router-link="`/yt-course/${lesson.slug}`"
      >
        {{ lesson.name }}
      </ion-item>
    </ion-list>
  </ion-card-content>
</ion-card>

Option 1b: Keep <li> and Nest <ion-router-link> #

If you need to retain the <li> tag for custom styling, nest <ion-router-link> inside it:

<ion-card>
  <ion-card-header>
    <ion-card-title>{{ name }}</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ul>
      <li v-for="lesson in lessons" :key="lesson.slug">
        <ion-router-link :href="`/yt-course/${lesson.slug}`">
          {{ lesson.name }}
        </ion-router-link>
      </li>
    </ul>
  </ion-card-content>
</ion-card>

Option 2: Programmatic Navigation with Vue Router #

If you want to add extra logic before navigating (like tracking clicks), use Vue Router's programmatic approach.

For Options API: #

<ion-card>
  <ion-card-header>
    <ion-card-title>{{ name }}</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ul>
      <li 
        v-for="lesson in lessons" 
        :key="lesson.slug"
        @click="navigateToLesson(lesson)"
      >
        {{ lesson.name }}
      </li>
    </ul>
  </ion-card-content>
</ion-card>

<script>
export default {
  methods: {
    navigateToLesson(lesson) {
      this.$router.push(`/yt-course/${lesson.slug}`);
    }
  }
}
</script>

For Composition API (Vue 3): #

<ion-card>
  <ion-card-header>
    <ion-card-title>{{ name }}</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ul>
      <li 
        v-for="lesson in lessons" 
        :key="lesson.slug"
        @click="navigateToLesson(lesson)"
      >
        {{ lesson.name }}
      </li>
    </ul>
  </ion-card-content>
</ion-card>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const navigateToLesson = (lesson) => {
  router.push(`/yt-course/${lesson.slug}`);
}
</script>

Quick Pre-Flight Check #

Make sure your router config has the corresponding route defined (usually in router/index.js):

const routes = [
  // ... other routes
  {
    path: '/yt-course/:slug',
    name: 'YtCourseDetail',
    component: () => import('../views/YtCourseDetail.vue') // Your target page component
  }
];

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