Ionic Vue: Router Link isn’t working/doing anything-CodePudding

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>

Second Test Page

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

CodePudding user response：

Vue Router renders the current paht's component in the router-view component.

Include <router-view></router-view> where you want the content to render.

CodePudding user response：

I got an answer somewhere else I'll post here. I didn't include this in the script section.

components: {
**insert components here**
}

And that prevented it from working, so here's the script section fixed

<script>
import { IonButton, IonList, IonItem } from "@ionic/vue";
import baseLayout from "@/components/base/baseLayout.vue"; (I exported this globally but I'll include it here anyway)
export default {
  components: {
    baseLayout,
    IonButton,
    IonList,
    IonItem,
  },
};