Ionic5 Vue3 路由配置 跳转路由

1、Ionic5 Vue3 路由配置

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/button',
    component: () => import('@/pages/ButtonPage.vue')
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: 'tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3.vue')
      }
    ]
  }
]

https://ionicframework.com/docs/vue/navigation

2、Ionic5 Vue3 跳转路由

https://ionicframework.com/docs/vue/navigation

<ion-button color="primary" router-link="/button">跳转到按钮演示页面</ion-button>

<ion-button @click="() => this.$router.push('/button')">跳转到button页面</ion-button>