PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.2.11

npm

@0x30/vue-navigation

模仿ios `UINavigationController` 缓存页面的方式，前进新的视图，back从堆栈中拉取缓存的视图

animekeepaliveroutervue3
Published12 Apr 2023
Direct dependencies8
Transitive dependenciesNot calculated

README

Current package documentation

@0x30/vue-navigation

安装

pnpm install @0x30/vue-navigation

使用

初始化

component 方式

import { Navigator } from '@0x30/vue-navigation'

createApp(
  <Navigator>
    <Home />
  </Navigator>
).mount('#app')

plugin 方式

import { navigation } from '@0x30/vue-navigation'

createApp(<Home />)
  .use(navigation)
  .mount('#app')

操作方法

import { push, replace, to } from '@0x30/vue-navigation'

/**
 * 推出 一个 div 到当前之上
 */
push(<div />)

/**
 * replace 当前
 */
replace(<div />)

/**
 * repace 与 push 的辅助方式
 */
to(true)(<div />)

返回

import { back, blackBoxBack, backToHome } from '@0x30/vue-navigation'

/**
 * 返回方法
 */
back()

/**
 * 黑箱返回
 * 当页面前往 一个页面后 可以移除掉一些之前的页面
 * 
 *  a -> b -> c -> d
 *  blackBoxBack(2)
 *  a -> d
 */
blackBoxBack()

/**
 * 回到rootView
 */
backToHome()

hooks 方法

  • onWillAppear 页面即将出现，执行动画之前
  • onDidAppear 页面已经出现，执行动画完成
  • onWillDisappear 页面即将消失，执行动画之前
  • onDidDisappear 页面已经消失，执行动画完成
  • useTransitionEnter 进入动画配置
  • useTransitionLeave 离开动画配置
  • useLeaveBefore 页面返回之前的拦截方法
  • useQuietPage 设置当前页面为安静的页面
  • usePageMate 配置当前页面的 基础信息
  • getCurrentPageMate 获取当前页面的 配置信息
  • onPageChange 当前发生变化
  • useProgressExitAnimated 配置渐进式动画

特殊说明

  • 此库不是 router,只是一种管理组件的方式
  • 此库所有页面均活跃,这不是内存泄漏,这符合ios视图导航的设计
  • 此库没有路由表,没有嵌套路由
  • 此库假定所有的页面组件均为fixed,且大小与屏幕一致
  • 此库只适用于极小众的项目,比如: 混合开发app内嵌的h5app

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 8

Native requirements
8 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
vue
Environment
{
  "local_name": "vue",
  "alias": false,
  "peer_metadata": null
}
^3.2.45runtime
vite
Environment
{
  "local_name": "vite",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
animejs
Environment
{
  "local_name": "animejs",
  "alias": false,
  "peer_metadata": null
}
^3.2.1development
vue-tsc
Environment
{
  "local_name": "vue-tsc",
  "alias": false,
  "peer_metadata": null
}
^1.0.11development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^4.9.3development
@types/animejs
Environment
{
  "local_name": "@types/animejs",
  "alias": false,
  "peer_metadata": null
}
^3.1.6development
vite-plugin-dts
Environment
{
  "local_name": "vite-plugin-dts",
  "alias": false,
  "peer_metadata": null
}
^1.7.1development
@vitejs/plugin-vue-jsx
Environment
{
  "local_name": "@vitejs/plugin-vue-jsx",
  "alias": false,
  "peer_metadata": null
}
^3.0.0development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "f5d9066e05b106791bbb62cfcf333e994897defb",
  "tarball": "https://registry.npmjs.org/@0x30/vue-navigation/-/vue-navigation-1.2.11.tgz",
  "fileCount": 5,
  "integrity": "sha512-vTl5Ky6bpgjSez9OWU+ed9jtLllhZebgIdCuhx6Xziu6+XWiLwG9q4hKIoihwrl/C8b6NBHB8skm7cSim3bQpQ==",
  "signatures": [
    {
      "sig": "MEQCIBQg/ONP2B2sglEwjcTcz8f846hiIDaOWA+wifpDNs9jAiAHs02K0iKWkvEGk7mZDD2DprT+1vL+ho1ud59EUDdtqQ==",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "unpackedSize": 17317,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNm4mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Cg//ZgLH7mrlrV4hstwK8f6l8hKyX/wHb0fgifj+T4n9BauO8XAx\r\nS4OSld2BVKnSsLJRFFu6I8yETtlXDgRo/VX1HzXTCTWM5MYV/nCjZb6fDzNj\r\nqarr6emxdGq+mNmi6nIhx52N90kR48u4glEW2N7U7jeOkxO1/nuq3AMSylsn\r\nTPNrL+gcwO14m1V1YfBWR1T0Z1KwOzXkPPQm9qTKT/tg5y7g+8fT2+fKpwmT\r\nmGGBaL2O2Ey6zINZ4ZTt7ggo+fWoqdRaGUSUvimr6uFoPiGjjUD8TxcU6T90\r\nbHe8V2WSCTkaLBwQwpSP3YHmqKsQABZjKGVG8pliNzOKf6yMtKyK9ixV30T5\r\n7mma0ZXdyWLCfHk+x4ZPI6umj0LB7sRT0Scn06cD4y+GdQwvNQIqG55QL45L\r\nKPcYGWxqZv1wvt6nM14Ph3GvzD0Onm61jCIc89tPLejAe+RRzqLehBc2rTRq\r\nMe18cI9Q0N7yegHFIZWooWbXPN1cbumgxGdBHyOIhuGjXgJ8LCKAWI4d2U4V\r\nWlpGOlIySswMx13sqn10oE3i5LQoicWHENqbE1Ncl9LawAw8rIM00d4VtT33\r\npKSGmbeJuT1iDHxfIF2Rla2AgmBkW0U7lbHZVcyD72S14j7hTEyRVXsCZt/I\r\nrq2yQEtK/1GiDmI4cRiKsvlTPZ4+TThYhrg=\r\n=KIb/\r\n-----END PGP SIGNATURE-----\r\n"
}

Repository

PENDING
0x30/vue-navigation

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 22:34 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:9dd28b45b0fb897ecdb4bfec2c3a4e65294bd01ce64e891c96e3ec9b8b88ebb7

Other collected versions

1.3.184 Nov1.3.177 Jul1.3.1620 Jun1.3.1521 May1.3.1418 Oct1.3.138 JanView all collected versions →