Router link in inner component

user_9282866 0
Viewed 150

Im using Vue and Ionic, this is my code: I have a page where I have this cards:

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

in this card i have this:

<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>

This all works and does what I want it to, but I would like this li to be link to other page. I have this other page ready, but I dont know how should I write my router-link, because if I use router-link in -li- element, it doesnt work.

This is how my route-link should look like, but I dont know where or how to put it, so my li element is link to other page.

:router-link="`/yt-course/${lesson.slug}`"
ionic-framework vue.js
1 Answers

In vue router router-link is not an attribute but a component. To navigate to other pages use the to attribute like show below:

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

This works fine and all, but it is the best practice to use Vue router's build-in component, like shown below:

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