ionic6-踩坑记录

1.ionic/vue 路由跳转问题：地址改变，但是不跳转
原因：在跳转路由组件中存在调用ionic组件，未在components中引入，控制台报warn，这是，通过router.push或者其他跳转都不成功
解决方案：在components中引入用到的组件

// test.vue
<template>
  <ion-page>
    <ion-content>
      <ion-header translucent>
        <ion-toolbar>
          <ion-buttons>
            <ion-button @click="back">back</ion-button>
          </ion-buttons>
          <ion-title>12344</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {IonContent, IonPage,IonButtons,IonButton,IonTitle,IonToolbar,IonHeader} from "@ionic/vue";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "Test",
  components: {
    IonContent,
    IonPage,
    IonButtons,
    IonButton,
    IonTitle,
    IonToolbar,
    IonHeader
  },
  setup() {
    const router = useRouter();
    return {router};
  },
  methods: {
    back() {
      this.router.back();
    }
  }
});
</script>

<style scoped>

</style>

// about.vue
<template>
  <ion-page>
    <ion-content>
      <ion-button @click="() => router.push('/test')">Go12 t2323o detail</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonButton, IonContent, IonPage } from '@ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  components: {
    IonButton,
    IonContent,
    IonPage,
  },
  setup() {
    const router = useRouter();
    return { router };
  },
});
</script>

// router.ts
import {createRouter, createWebHistory} from "@ionic/vue-router";
import {RouteRecordRaw} from "vue-router";
import Home from "../views/Home.vue";


const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ "../views/About.vue")
    },
    {
        path: "/test",
        name: "Test",
        component: () => import(/* webpackChunkName: "about" */ "@/views/test/test.vue")
    }
];

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

export default router;