npmpackage.info

Gathering detailed insights and metrics for vue-router-cache-animate

vue-router-cache-animate - 0.0.5 | npmpackage.info

vue-router-cache-animate

为 vue-router 快速自定义缓存和动画。Quickly customize caching and animation for vue-router.

0.0.5

MIT

TypeScript

1.92 kB

1,516 1.7

Installations

npm install vue-router-cache-animate

Developer Guide

BETA

Typescript

No

Module System

CommonJS, UMD

Node Version

12.13.0

NPM Version

6.12.0 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

TypeScript (65.42%)

JavaScript (34.58%)

Developer

sparklinm

Download Statistics

Total Downloads

1,516

Last Day

Last Week

Last Month

Last Year

183

GitHub Statistics

MIT License

1 Stars

10 Commits

1 Watchers

2 Branches

1 Contributors

Updated on Jul 04, 2022

Bundle Size

5.51 kB

Minified

1.92 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.0.5

Package Id

vue-router-cache-animate@0.0.5

Unpacked Size

299.19 kB

Size

102.45 kB

File Count

NPM Version

6.12.0

Node Version

12.13.0

Total Downloads

Cumulative downloads

Total Downloads

1,516

Last Day

-50%

Compared to previous day

Last Week

-37.5%

Compared to previous week

Last Month

80%

Compared to previous month

Last Year

2.2%

183

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime-corejs3 autoprefixer babel-eslint cross-env eslint eslint-plugin-html eslint-plugin-vue ink-docstrap jsdoc postcss postcss-cli rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser

vue-router-cache-animate

使用 vue 的 keep-alive 和 transition 组件对路由进行快捷的动画和缓存设置。

demo

安装

1npm i vue-router-cache-animate
2yarn add vue-router-cache-animate

使用

main.js

1import Vue from 'vue'
2import router from './router'
3import vueRouterCacheAnimate from 'vue-router-cache-animate'
4
5// 提供的移动端 slide-left、slide-right 动画，也可以自定义
6import 'vue-router-cache-animate/dist/css/animate.css'
7Vue.use(vueRouterCacheAnimate, { router })

App.vue

1<template>
2  <div id="app">
3    <vue-router-cache-animate :caches="caches" :transitions="transitions">
4      <router-view />
5    </vue-router-cache-animate>
6  </div>
7</template>
8<script>
9export default {
10  data() {
11    return {
12      caches: [
13        {
14          // 路由 name 和路由组件的 name（需保证相同）
15          names: {
16            include: ['A'],
17            exclude: undefined
18          },
19          // 在哪些路由上被缓存
20          cachedOn: {
21            include: ['B', 'C'],
22            exclude: undefined
23          }
24        }
25      ],
26      transitions: [
27        {
28          name: 'slide-left',
29          reverseName: 'slide-right',
30          from: {
31            // 路由 name
32            include: ['A'],
33            exclude: undefined
34          },
35          to: {
36            // 路由 name
37            include: ['B', 'C'],
38            exclude: undefined
39          }
40        }
41      ]
42    }
43  }
44}
45</script>

Props

caches

缓存设置。

类型：Array
默认值：
```
1{
2  names: {},
3  cachedOn: {}
4}
```
默认缓存所有路由。

示例：

1export default {
2  data() {
3    return {
4      caches: [
5        {
6          // 路由 name 和路由组件的 name（需保证相同）
7          names: {
8            include: ['A']
9            // exclude: []
10          },
11          // 在'B', 'C'路由上缓存路由组件 A
12          cachedOn: {
13            include: ['B', 'C']
14            // exclude: []
15          }
16        },
17        {
18          names: {
19            include: ['B']
20          },
21          // 在 'C' 路由上缓存路由组件 B
22          cachedOn: {
23            include: ['C']
24          }
25        }
26      ]
27    }
28  }
29}

除了使用 include 包含，还可以使用 exclude 排除。

transitions

动画设置。

类型：Array
默认值：[]

示例：

1export default {
2  data() {
3    return {
4      transitions: [
5        {
6          // transition 组件的 name 选项
7          // 从 'A' 路由到 'B', 'C' 路由使用 'slide-left' 动画
8          name: 'slide-left',
9          // 'B', 'C' 路由到 'A', 使用 'slide-right' 动画
10          reverseName: 'slide-right',
11          from: {
12            // 路由 name
13            include: ['A']
14            // exclude: []
15          },
16          to: {
17            // 路由 name
18            include: ['B', 'C']
19            // exclude: []
20          }
21        }
22      ]
23    }
24  }
25}

noCacheOnBack

后退时，是否缓存路由。

类型：Boolean
默认值：false

后退的情况：

浏览器后退按钮。
history.go(-n) 或者 history.back()。
router.go(-n) 或者 router.back()。
其他操作浏览器历史记录倒退的方法。

实现像手机端 app 一样前进刷新，后退缓存的效果。

路由切换时，会自动缓存前一个路由。当后退时，不缓存当前路由，这样当再次前往该路由时，会重新生成。

1export default {
2  data() {
3    return {
4      noCacheOnBack: true
5    }
6  }
7}

当使用 history.pushState(state, title, path) 和 history.replaceState 时，需要设置 state 为一个对象，并提供一个唯一 key 属性。例如：
1history.pushState(
2  {
3    key: new Date() + Math.random()
4  },
5  title,
6  path
7)
这个 key 会被用来判断浏览器是前进还是后退。

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

98 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rjqq-98f6-6j3r
Warn: Project is vulnerable to: GHSA-mjxr-4v3x-q3m4
Warn: Project is vulnerable to: GHSA-cgfm-xwp7-2cvr
Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
Warn: Project is vulnerable to: GHSA-mxhp-79qh-mcx6
Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

1.7

/10

Last Scanned on 2025-04-28

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More