Skip to content

Commit f1c14f9

Browse files
hezhongfenghezhongfeng
committed
Merge branch 'release-3.1.0'
2 parents d1c6695 + 775389b commit f1c14f9

10 files changed

+130
-133
lines changed

‎README.md

+24-28
Original file line numberDiff line numberDiff line change
@@ -49,23 +49,33 @@ pnpm install vue-page-stack
4949

5050
```js
5151
import { createApp } from 'vue';
52-
import VuePageStack from 'vue-page-stack';
52+
import { VuePageStackPlugin } from 'vue-page-stack';
5353

5454
const app = createApp(App);
5555

56-
// vue-router is necessary
57-
app.use(VuePageStack, { router });
56+
// router is necessary
57+
app.use(VuePageStackPlugin, { router });
5858
```
5959

60-
```js
60+
```vue
6161
// App.vue
6262
<template>
6363
<router-view v-slot="{ Component }">
64-
<vue-page-stack>
64+
<vue-page-stack @back="onBack" @forward="onForward">
6565
<component :is="Component" :key="$route.fullPath"></component>
6666
</vue-page-stack>
6767
</router-view>
6868
</template>
69+
70+
<script setup>
71+
const onBack = () => {
72+
console.log('back');
73+
};
74+
75+
const onForward = () => {
76+
console.log('forward');
77+
};
78+
</script>
6979
```
7080

7181
## API
@@ -75,9 +85,10 @@ app.use(VuePageStack, { router });
7585
use `Vue.use` to install `vue-page-stack`
7686

7787
```js
78-
app.use(VuePageStack, options);
79-
// example
80-
app.use(VuePageStack, { router });
88+
import { VuePageStackPlugin } from 'vue-page-stack';
89+
90+
//...
91+
app.use(VuePageStackPlugin, { router });
8192
```
8293

8394
Options description：
@@ -86,37 +97,22 @@ Options description：
8697
| --------- | ------------------- | ------ | ------------------- | -------------- |
8798
| router | vue-router instance | Object | vue-router instance | - |
8899
| name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' |
89-
| keyName | stack-key name | String | 'stack-key' | 'stack-key' |
90100

91-
you can customize VuePageStack's name and keyName
92-
93-
```js
94-
app.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
95-
```
96-
97-
### forward or backward
101+
### forward or back
98102

99103
If you want to make some animate entering or leaving, `vue-page-stack` offers `stack-key-dir` to judge forward or backward.
100104

101-
```js
105+
```vue
102106
// App.vue
103-
watch(route, to => {
104-
if (to.params['stack-key-dir'] === 'forward') {
105-
console.log('forward');
106-
} else {
107-
console.log('back');
108-
}
109-
});
107+
<vue-page-stack @back="onBack" @forward="onForward">
108+
<component :is="Component" :key="$route.fullPath"></component>
109+
</vue-page-stack>
110110
```
111111

112112
[example](https://github.com/hezhongfeng/vue-page-stack-example/blob/master/src/App.vue)
113113

114114
## Notes
115115

116-
### keyName
117-
118-
Why is the parameter `keyName` added to the route? To support the browser's backward and forward events，this is important in webApp or wechat.
119-
120116
### Changelog
121117

122118
Details changes for each release are documented in the [release notes](https://github.com/hezhongfeng/vue-page-stack/releases).

‎README.zh-cn.md

+39-33
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# vue-page-stack
22

3-
**这个是 Vue3.0 的版本，Vue2.0 请点击[这个链接](https://github.com/hezhongfeng/vue-page-stack/tree/v1.5.0)**
3+
**这个是 Vue3.x 的版本 ，Vue2.0 请点击[这个链接](https://github.com/hezhongfeng/vue-page-stack/tree/v1.5.0)**
44

55
[![npm version](https://badge.fury.io/js/vue-page-stack.svg)](https://badge.fury.io/js/vue-page-stack)
66

@@ -49,77 +49,83 @@ pnpm install vue-page-stack
4949

5050
```js
5151
import { createApp } from 'vue';
52-
import VuePageStack from 'vue-page-stack';
52+
import { VuePageStackPlugin } from 'vue-page-stack';
5353

5454
const app = createApp(App);
5555

56-
// vue-router is necessary
57-
app.use(VuePageStack, { router });
56+
// router is necessary
57+
app.use(VuePageStackPlugin, { router });
5858
```
5959

60-
```js
60+
```vue
6161
// App.vue
6262
<template>
6363
<router-view v-slot="{ Component }">
64-
<vue-page-stack>
64+
<vue-page-stack @back="onBack" @forward="onForward">
6565
<component :is="Component" :key="$route.fullPath"></component>
6666
</vue-page-stack>
6767
</router-view>
6868
</template>
69+
70+
<script setup>
71+
const onBack = () => {
72+
console.log('back');
73+
};
74+
75+
const onForward = () => {
76+
console.log('forward');
77+
};
78+
</script>
6979
```
7080

7181
## API
7282

7383
### 注册插件
7484

75-
注册的时候可以指定 VuePageStack 的名字和 keyName
76-
77-
use `app.use` to install `vue-page-stack`
7885
使用之前需要注册插件
7986

8087
```js
81-
app.use(VuePageStack, options);
82-
// example
83-
app.use(VuePageStack, { router });
88+
import { VuePageStackPlugin } from 'vue-page-stack';
89+
90+
//...
91+
app.use(VuePageStackPlugin, { router });
8492
```
8593

8694
Options 说明：
8795

8896
| Attribute | Description | Type | Accepted Values | Default |
8997
| --------- | ------------------- | ------ | ------------------- | -------------- |
9098
| router | vue-router instance | Object | vue-router instance | - |
91-
| name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' |
92-
| keyName | stack-key name | String | 'stack-key' | 'stack-key' |
93-
94-
注册的时候可以指定 VuePageStack 的名字和 keyName
95-
96-
```js
97-
app.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
98-
```
9999

100100
### 前进和后退
101101

102-
如果想在页面前进或者后退的时候添加一些动画，可以通过`stack-key-dir`进行判断
102+
如果想在页面前进或者后退的时候添加一些事件，可以通过组件的 `back` 事件和 `forward` 事件进行处理
103103

104-
```js
104+
```vue
105105
// App.vue
106-
watch(route, to => {
107-
if (to.params['stack-key-dir'] === 'forward') {
108-
console.log('forward');
109-
} else {
110-
console.log('back');
111-
}
112-
});
106+
<template>
107+
<router-view v-slot="{ Component }">
108+
<vue-page-stack @back="onBack" @forward="onForward">
109+
<component :is="Component" :key="$route.fullPath"></component>
110+
</vue-page-stack>
111+
</router-view>
112+
</template>
113+
114+
<script setup>
115+
const onBack = () => {
116+
console.log('back');
117+
};
118+
119+
const onForward = () => {
120+
console.log('forward');
121+
};
122+
</script>
113123
```
114124

115125
[example](https://github.com/hezhongfeng/vue-page-stack-example/blob/master/src/App.vue)
116126

117127
## 相关说明
118128

119-
### keyName
120-
121-
为什么会给路由添加`keyName`这个参数，是为了支持浏览器的后退，前进事件，这个特性在 webApp,微信公众号和小程序很重要
122-
123129
### 更新日志
124130

125131
主要的更新日志在 [release notes](https://github.com/hezhongfeng/vue-page-stack/releases)

‎dist/vue-page-stack.cjs.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)