内部组件中的路由器链接

Question

我正在使用 Vue 和 Ionic，这是我的代码： 我有一个页面，里面有这张卡片：

<yt-course-card
            v-for="lesson in ytTheme.lessons"
            :key="lesson"
            :name="lesson.group_name"
            :lessons="lesson.group_lessons"
></yt-course-card>

在这张卡片上我有这个：

<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">{{ lesson.name }}</li>
            </ul>
        </ion-card-content>
    </ion-card>

这一切都可以正常工作，可以做我想做的事，但我希望这个 li 可以链接到其他页面。我已经准备好另一个页面，但我不知道应该如何编写我的路由器链接，因为如果我在 -li- 元素中使用路由器链接，它就不起作用。

这就是我的路由链接应该是什么样子，但我不知道在哪里或如何放置它，所以我的 li 元素链接到其他页面。

:router-link="`/yt-course/${lesson.slug}`"

Answer 1

在vue中路由器router-link不是属性而是组件。要导航到其他页面，请使用to 属性，如下所示：

<li :to="{ mame: 'yourRouteName' }">Link to a page</li>

这一切都很好，但最好的做法是使用 Vue 路由器的内置组件，如下所示：

<li>
  <router-link :to="{ mame: 'yourRouteName' }">Link to a page</router-link>
</li>