Router Link isn't working/doing anything

Ionic Framework Ionic Vue
1

I’m developing an app and getting some of the basics down, however, when I copy the tutorial I’m using and copied the official documentation example, I can’t get router link to work at all, it does nothing. I have no idea what I’m doing wrong but it neither make a component clickable or leads anywhere. I know the pages I’ve linked to work and are reachable because I’ve gotten to them by changing the url while testing on Google Chrome. Here is my code.

First Page I’m navigating from

<template>
  <base-layout page-title="Student List/MainTemp">
      <ion-list>
       <ion-item router-link="/studentList/1">Billy Click click Click click</ion-item>
       <ion-item>Michael</ion-item>
       <ion-item>Gabby</ion-item>
       <ion-item>Nick</ion-item>
       <ion-item>Virginia</ion-item>
      </ion-list>
      <ion-button router-link="/studentListTest.vue" :router-animation="myAnimation">Click Me</ion-button>
  </base-layout>
</template>

<script>

import {
  IonButton,
  IonList,
  IonItem
} from "@ionic/vue";

export default {

  IonButton,
  IonList,
  IonItem

};

</script>

Pages I’m tring to navigate to:

<template>
    <base-layout>
        <h2>the student details</h2>
    </base-layout>
</template>
<script>

export default {
}
</script>

<template>

  <base-layout page-title="Student List Test">
      <ion-list>
       <ion-item router-link="/studentList/1">Jimmyyy tick tick Click click</ion-item>
       <ion-item>Michaasdfel</ion-item>
       <ion-item>Gabbasdfy</ion-item>
       <ion-item>Nickasdf</ion-item>
       <ion-item>West Virginia</ion-item>
      </ion-list>
      <ion-button router-link="/" :router-animation="myAnimation">Click zzMe</ion-button>
  </base-layout>
</template>

<script>

import {
  IonButton,
  IonList,
  IonItem
} from "@ionic/vue";

export default {
  IonButton,
  IonList,
  IonItem
};

</script>

Router index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';
import studentList from '../pages/studentList.vue';
import studentListTest from '../pages/studentListTest.vue';
const routes = [
  {
    path: '/',
    redirect: '/studentList'
  },
  {
    path: '/studentList',
    component: studentList
  },
  {
    path: '/studentListTest',
    component: studentListTest
  },
  {
    path: '/studentList/1',
    component: () => import('../pages/studentDetails.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

And the base-layout for extra context

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title> {{ pageTitle }} </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <slot />
    </ion-content>
  </ion-page>
</template>

<script>
 import {
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
} from "@ionic/vue";
export default {
  props: {
      pageTitle: String
  },
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
};

</script>
2

The router-link documentation is here.

You need something like:

<ion-button :router-link="{ path: '/studentList/1' }">BLAH</ion-button>

I think you also need to have the button prop on the ion-item (reference) to make it clickable.

You also don’t need to set router-animation as Ionic has default animations. Since you are just started out, I wouldn’t try using custom ones.

3

I tried this out and nothing changed for either router link.
Also, this is what I was looking at previously and basing my work on.

Ionic & Vue.js - Full Tutorial (Build a Complete App) - YouTube (it’s should go to the part of the video with the code I’m referring to)

<template>
  <base-layout page-title="Student List/MainTemp">
      <ion-list>
       <ion-item router-link="{ path: '/studentList/1'}">Jimmy Click click Click click</ion-item>
       <ion-item>Michael</ion-item>
       <ion-item>Gabby</ion-item>
       <ion-item>Nick</ion-item>
       <ion-item>Virginia</ion-item>
      </ion-list>
      <ion-button :router-link="{ path: '/studentList/1'}">Click Me</ion-button>
  </base-layout>
</template>
4

My bad, it looks like you can use just a string then :slight_smile: I use named routes so I always use the object syntax.

Can you share your code on GitHub/GitLab so we can play with it?

5

Here you go, I really appreciate the help.

6

Ok, I figured out your issues. Did you by chance look at DevTools (F12 in Chrome)? There are a whole bunch of Vue warnings about failing to resolve components in the console.

First, you need to import baseLayout in the components it is being used.

import baseLayout from "@/components/base/baseLayout.vue";

Then, you are missing the components object when registering the components being used. Here is an example of what it should look like.

studentList.vue

<template>
  <base-layout page-title="Student List/MainTemp">
    <ion-list>
      <ion-item router-link="/studentList/1">
        Jimmy Click click Click click
      </ion-item>
      <ion-item>Michael</ion-item>
      <ion-item>Gabby</ion-item>
      <ion-item>Nick</ion-item>
      <ion-item>Virginia</ion-item>
    </ion-list>
    <ion-button router-link="/studentListTest">Click Me</ion-button>
  </base-layout>
</template>

<script>
import { IonButton, IonList, IonItem } from "@ionic/vue";
import baseLayout from "@/components/base/baseLayout.vue";
export default {
  components: {
    baseLayout,
    IonButton,
    IonList,
    IonItem,
  },
};
</script>
1 Like
7

That got it working and I forgot about Dev Tools since I’m using a new framework.
Thank you so much for the help. That’s a big help now and in the future.
Also, what you said led me to something else that was pretty interesting.
So what had done previously to baseLayout imported universally, what in main.js I had this:
That took care of that import, but the components under export default messed me up.
Thank you again, I was losing my mind over this.

import baseLayout from './components/base/baseLayout.vue'
const app = createApp(App)
  .use(IonicVue)
  .use(router);
app.component('base-layout', baseLayout)
1 Like
8

Great to hear! Yup, you can definitely import and register baseLayout globally. I globally register IonPage and IonContent. You just want to make sure you don’t go overboard with global registration (reference) :wink: