PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.0.8

npm

@0x30/vue-navigation

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

animekeepaliveroutervue3
Published18 Feb 2021
Direct dependencies25
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 25

Native requirements
25 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
vue
Environment
{
  "local_name": "vue",
  "alias": false,
  "peer_metadata": null
}
^3.0.5runtime
vue-router
Environment
{
  "local_name": "vue-router",
  "alias": false,
  "peer_metadata": null
}
^4.0.3runtime
jest
Environment
{
  "local_name": "jest",
  "alias": false,
  "peer_metadata": null
}
^26.6.3development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^6.7.2development
rollup
Environment
{
  "local_name": "rollup",
  "alias": false,
  "peer_metadata": null
}
^2.38.5development
ts-jest
Environment
{
  "local_name": "ts-jest",
  "alias": false,
  "peer_metadata": null
}
^26.5.0development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^1.19.1development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^4.1.3development
@types/jest
Environment
{
  "local_name": "@types/jest",
  "alias": false,
  "peer_metadata": null
}
^26.0.20development
@vue/cli-service
Environment
{
  "local_name": "@vue/cli-service",
  "alias": false,
  "peer_metadata": null
}
~4.5.0development
@vue/compiler-sfc
Environment
{
  "local_name": "@vue/compiler-sfc",
  "alias": false,
  "peer_metadata": null
}
^3.0.0development
eslint-plugin-vue
Environment
{
  "local_name": "eslint-plugin-vue",
  "alias": false,
  "peer_metadata": null
}
^7.0.0-0development
@vue/cli-plugin-babel
Environment
{
  "local_name": "@vue/cli-plugin-babel",
  "alias": false,
  "peer_metadata": null
}
~4.5.0development
@vue/cli-plugin-eslint
Environment
{
  "local_name": "@vue/cli-plugin-eslint",
  "alias": false,
  "peer_metadata": null
}
~4.5.0development
@vue/cli-plugin-router
Environment
{
  "local_name": "@vue/cli-plugin-router",
  "alias": false,
  "peer_metadata": null
}
~4.5.0development
eslint-plugin-prettier
Environment
{
  "local_name": "eslint-plugin-prettier",
  "alias": false,
  "peer_metadata": null
}
^3.1.3development
@rollup/plugin-commonjs
Environment
{
  "local_name": "@rollup/plugin-commonjs",
  "alias": false,
  "peer_metadata": null
}
^17.1.0development
@rollup/plugin-typescript
Environment
{
  "local_name": "@rollup/plugin-typescript",
  "alias": false,
  "peer_metadata": null
}
^8.1.1development
@typescript-eslint/parser
Environment
{
  "local_name": "@typescript-eslint/parser",
  "alias": false,
  "peer_metadata": null
}
^2.33.0development
rollup-plugin-typescript2
Environment
{
  "local_name": "rollup-plugin-typescript2",
  "alias": false,
  "peer_metadata": null
}
^0.29.0development
@vue/cli-plugin-typescript
Environment
{
  "local_name": "@vue/cli-plugin-typescript",
  "alias": false,
  "peer_metadata": null
}
~4.5.0development
@rollup/plugin-node-resolve
Environment
{
  "local_name": "@rollup/plugin-node-resolve",
  "alias": false,
  "peer_metadata": null
}
^11.1.1development
@vue/eslint-config-prettier
Environment
{
  "local_name": "@vue/eslint-config-prettier",
  "alias": false,
  "peer_metadata": null
}
^6.0.0development
@vue/eslint-config-typescript
Environment
{
  "local_name": "@vue/eslint-config-typescript",
  "alias": false,
  "peer_metadata": null
}
^5.0.2development
@typescript-eslint/eslint-plugin
Environment
{
  "local_name": "@typescript-eslint/eslint-plugin",
  "alias": false,
  "peer_metadata": null
}
^2.33.0development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "ae9d22d0514393debcd81e303e4c83d30c889b6c",
  "tarball": "https://registry.npmjs.org/@0x30/vue-navigation/-/vue-navigation-1.0.8.tgz",
  "fileCount": 27,
  "integrity": "sha512-0GD4Z8XPISwreZAx30ceLNv+mcSz1mQVOJk6Yi/wPdUS02oxYdhp6TwDZmHX/WIFziqoKnSWcVEmNDO9PJ3L8Q==",
  "signatures": [
    {
      "sig": "MEYCIQCE2JIPUqJe0DoW6VjRLq+3YbZM7VZcrnw+f1iO5xtZPQIhAOmYe6yTKIxlaV88VIrj8OxjUDbePMT4x4ykrF6zDpYN",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "unpackedSize": 59579,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLhjKCRA9TVsSAnZWagAA9EEP/3LpOH7sVJje9kJcagKW\nlwFdyvXgQacb3G489DAnaFEtkd3Wt7Ic9prHPlQV1rg9iL1Mw+69rqf/cf57\nRCkFBgY/QjtdB3wtaPjexsEhg49/bSUYxo31FxxyQDyHUcEiNWhglVBI/zHL\nTNkn6dshFAxEcNM2JfUuk8rLbhwgLykOEOw7hbP/n3hQgtxbbAQa9FuWbnuU\nctgOWYbPFJZwVziI9Gat7CUgNrZWgslLgT48yYONn5od5Lg8tfzGJ+UQ3H2V\n4XuZyZgEsw67NjzLEzY1HGbfmluXe5BeaFwcxv7RO2eg4RV/5AKQJlTkqKpT\nMJn65TXjMko9v4pMGUPJ4+gXxH4hSaKFYb8k3X/9oGHr2y1BzXOEEz0HJAtB\n0RJcDOuIodbcJvoLR9bh7ScLnTaDClRy561Axds5Wd13SoIjGY4B0GepGvBl\npsNOsKPsSR8Ir2SLag4dz7Uz/o3bDqlKffnA0Gvb8WbSnVZnJIWZ5GIGWu71\nzU3wWQkDuGacoMzCBJBQVQUHKPN8GjfSX3lh6Ia7HymRJ3hnH0YzBtILX+Yu\npkQmeNJJeM011EVM39N6s8XQz0ZB+ZkM6GAJ+WJUmmJBOfLi+z7JTkaU5Zrb\nOnDM94bfhqMYOWKZpU0351C0Iar3Xe+ajcbiLyCo/YOvRZP9ouZzz/+8pck/\nqreJ\r\n=ej7W\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:0705ed99fcf0eceab6df5bc79a75a920dbdbc7de5c5763ee1db5b92435869c41

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 →