vue-native-navigation
v2.0.1
Published
开发者先根据实际场景为每个路由设置页面深度,然后组件会在路由跳转时根据对应的页面深度判断是否缓存页面,以及如何展示过渡动画。
Downloads
53
Maintainers
Readme
路由导航组件
功能:
- 改写
keep-alive
组件实现仿原生app的,路由前进加载后退缓存功能 - 借助
transition
组件实现仿原生app的,路由前进后退过渡动画
原理:
开发者先根据实际场景为每个路由设置页面深度,然后组件会在路由跳转时根据对应的页面深度判断是否缓存页面,以及如何展示过渡动画。
使用:
引入组件
// main.js
import vueNativeNavigation from 'vue-native-navigation'
Vue.use(vueNativeNavigation)
使用组件
<!--App.vue-->
<template>
<div id="app">
<vue-native-navigation>
<router-view />
</vue-native-navigation>
</div>
</template>
为每个路由设置页面深度 depth
// router.js
new Router({
routes: [
{
path: '/list',
meta: { depth: 1 },
component: () => import('@/views/list')
},
{
path: '/detail',
meta: { depth: 2 },
component: () => import('@/views/detail')
},
]
})
// 上例配置后,
// 从list页进入detail页,会缓存list页重新加载detail页,页面从右往左滑入
// 从detail页返回list页,会显示缓存的list页,销毁detail页,页面从左往右滑出
options
sessionStoreKey
功能:存储在sessionStore里的key 类型:String
默认值:__VUE_CACHED_VIEWS__
useRouteTransition
功能:是否使用路由过渡动画 类型:Boolean
默认值:true
routeTransitionLimit
功能:使用路由过渡动画时安卓机的最低版本限制 (ios不做限制) 类型:Number
默认值:8
API
getCachedPages
功能:获取被缓存的页面的实例数组, 数组中第一个元素为首页,最后一个元素为当前页面。类似小程序的wx.getCurrentPages() 使用方法:this.$navigation.getCachedPages()
getPreviousCachedPage
功能:获取缓存的前一个页面的实例。若不存在则返回undefined 使用方法:this.$navigation.getPreviousCachedPage()
clearCachedPages
功能:清除所有缓存的页面 使用方法:this.$navigation.clearCachedPages()
clearCachedPagesByPath
功能:根据路由地址清除缓存的页面 使用方法:this.$navigation.clearCachedPagesByPath(path: string | string[])
setRouteTransitionName
功能:设置下一次路由跳转动画方式 使用方法:this.$navigation.setRouteTransitionName(transitionName: ''|'slide-left'|'slide-right')
forcePush
功能:强制前进 使用方法:this.$navigation.forcePush(route: Route)
Hook
afterRouteEnter
功能:为所有组件添加了afterRouteEnter
钩子,用于在进入路由动画完成时触发。