cupertino-page-router

✨ What is cupertino-page-router? It's a CupertinoPageRoute<T> class in Flutter means that it provides an iOS-style page transition.

• A modal route that replaces the entire screen with an iOS transition.
• The page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it.

Example

CodeSendBox

Install :coffee:

Note: The plugin only support for Vue3+ and Vue Router Next (vue-router^4)

pnpm i @lizychy0329/cupertino-page-router

Usage :rocket:

Import the Vue plugin on your main.js

// main.ts
import RouterViewTransition from '@lizychy0329/cupertino-page-router'
import '@lizychy0329/cupertino-page-router/style.css'

app.use(RouterViewTransition)

Replace your router-view with RouterViewTransition component

<!-- App.vue -->
<template>
   <router-view-transition />
</template>

Add KeepAlive component with slots

<!-- App.vue -->
<template>
  <router-view-transition v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view-transition>
</template>

Priority :snake:

Priority: Meta zIndex > Routes Index > Path Depth

1. 🏕️cupertino-page-router will default to judging by Path Depth.
2. 🏔️If the Path Depth is the same, it will then evaluate the Routes Index in the routes configuration file.
3. 🌋If the to/from routes in the configuration file have a Meta zIndex field, it will be evaluated with the highest priority. Feel free to ask if you need any further modifications!

// Meta zIndex options
const routes = [
  {
    path: '/',
    name: 'page1',
    component: Page1,
    meta: {
      zIndex: 1
    }
  }
]