Ionic Vue: Router Link不工作/不做任何事情

Question

我正在开发一个应用程序并获得一些基础知识，然而，当我复制我正在使用的教程并复制官方文档示例时，我根本无法让路由器链接工作，它什么也不做。我不知道我做错了什么，但它既不使组件可点击或导致任何地方。我知道我链接到工作的页面是可访问的，因为我在谷歌浏览器上测试时通过更改url找到了它们。这是我的代码。

第一页我从

导航

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

我要浏览的页面:

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

路由器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

和用于额外上下文的base-layout

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

Answer 1

Vue Router将当前路径的组件呈现在router-view组件中。

包括<router-view></router-view>，你想要的内容呈现。

Answer 2

我在别的地方得到了答案，我会贴在这里。我没有把它包含在脚本部分。

components: {
**insert components here**
}

这阻止了它的工作，所以这里是固定的脚本部分

<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,
},
};