No longer use keep-alive, add key to implement cache logic

.babelrc

@@ -3,7 +3,6 @@
     ["env", { "modules": false }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
   "comments": false,
   "env": {
     "test": {

README.md

@@ -9,12 +9,12 @@
 
 vue-navigation default behavior is similar to native mobile app (A、B、C are pages):
 
-1. A forward to B，then forward to C;
-2. C back to B，B will **recover from cache**;
-3. B back to A，A will **recover from cache**;
-4. A forward to B again，B will **rebuild, not recover from cache**.
+1. A forward to B, then forward to C;
+2. C back to B, B will **recover from cache**;
+3. B forward to C again, C will **rebuild, not recover from cache**;
+4. C forward to A, A will **build, now the route contains two A instance**.
 
-**!important: Because the browser does not provide page forward and backward events, so the library needs to maintain a routing record to determine the forward and backward behavior, so the current routing records are not allowed to contain duplicate routes, and now forward to the existing route will be identified as backward behavior**
+**!important: vue-navigation adds a key to the url to distinguish the route. The default name of the key is VNK, which can be modified.**
 
 ### DEMO
 
@@ -58,26 +58,6 @@ App.vue
 </template>
 ```
 
-### Events
-functions: [ `on` | `once` | `off` ]
-
-event types: [ `forward` | `back` | `refresh` | `reset` ]
-
-parameter( `to` | `from` ) properties:
-- name
-  - type: string
-  - desc: name of the component corresponding to the route
-- route:
-  - type: object
-  - desc: vue-route`s route object
-
-```javascript
-this.$navigation.on('forward', (to, from) => {})
-this.$navigation.once('back', (to, from) => {})
-this.$navigation.off('refresh', (to, from) => {})
-this.$navigation.on('reset', () => {})
-```
-
 ### Use with vuex2
 
 main.js
@@ -94,15 +74,37 @@ Vue.use(Navigation, {router, store})
 
 After passing in `store`, `vue-navigation` will register a module in `store` (default module name is `navigation`), and commit `navigation/FORWARD` or `navigation/BACK` or `navigation/REFRESH` when the page jumps.
 
-You can set the name of the module yourself:
+## Options
+
+Only `router` is required.
 
 ```javascript
-Vue.use(Navigation, {router, store, moduleName: 'name'})
+Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
+```
+
+## Events
+functions: [ `on` | `once` | `off` ]
+
+event types: [ `forward` | `back` | `refresh` | `reset` ]
+
+parameter( `to` | `from` ) properties:
+- `name`
+  - type: string
+  - desc: name of the route(contains the key)
+- `route`
+  - type: object
+  - desc: vue-route`s route object
+
+```javascript
+this.$navigation.on('forward', (to, from) => {})
+this.$navigation.once('back', (to, from) => {})
+this.$navigation.off('refresh', (to, from) => {})
+this.$navigation.on('reset', () => {})
 ```
 
 ## Methods
 
-Use `Vue.navigation` in global environment or use `this.$navigation` in vue instance
+Use `Vue.navigation` in global environment or use `this.$navigation` in vue instance.
 
 - `getRoutes()` get the routing records
 - `cleanRoutes()` clean the routing records

README_CN.md

@@ -3,16 +3,17 @@
 [![npm](https://img.shields.io/npm/v/vue-navigation.svg)](https://www.npmjs.com/package/vue-navigation)
 [![npm](https://img.shields.io/npm/dm/vue-navigation.svg)](https://www.npmjs.com/package/vue-navigation)
 
-> 必须配合 [vue](https://github.com/vuejs/vue) `2.x` 与 [vue-router](https://github.com/vuejs/vue-router) `2.x` 一起使用
+> 需要 [vue](https://github.com/vuejs/vue) `2.x` 与 [vue-router](https://github.com/vuejs/vue-router) `2.x`。
+
 
 导航默认行为类似手机APP的页面导航（A、B、C为页面）：
 
 1. A前进到B，再前进到C；
-2. C返回到B时，B的状态从缓存中恢复；
-3. B返回到A时，A的状态从缓存中恢复；
-4. A再次前进到B时，B重新生成，不从缓存中恢复。
+2. C返回到B时，B会**从缓存中恢复**；
+3. B再次前进到C，C会**重新生成，不会从缓存中恢复**；
+4. C前进到A，A会**生成，现在路由中包含2个A实例**。
 
-**！重要：因为浏览器不提供页面前进与后退事件，所以本库需要维护一份路由记录来判断前进后退行为，所以目前路由记录中不允许包含重复的路由，现在前进到存在的路由将被识别为返回行为**
+**！重要：vue-navigation在url中添加了一个key来区分路由。key的名称默认为VNK，可以修改。**
 
 ### 在线演示
 
@@ -40,11 +41,11 @@ main.js
 
 ```javascript
 import Vue from 'vue'
-import router from './router' // vue-router instance
+import router from './router' // vue-router 实例
 import Navigation from 'vue-navigation'
 
 Vue.use(Navigation, {router})
-// bootstrap your app...
+// 启动你的应用...
 ```
 App.vue
 
@@ -56,16 +57,40 @@ App.vue
 </template>
 ```
 
+### 搭配vuex2使用
+
+main.js
+
+```javascript
+import Vue from 'vue'
+import router from './router' // vue-router 实例
+import store from './store' // vuex store 实例
+import Navigation from 'vue-navigation'
+
+Vue.use(Navigation, {router, store})
+// 启动你的应用...
+```
+
+传入 `store` 后，`vue-navigation` 会向 `store` 注册一个Module（Module的默认名称为 `navigation`），同时在页面跳转时会提交 `navigation/FORWARD` 或 `navigation/BACK` 或 `navigation/REFRESH`。
+
+## Options
+
+只有`route`是必须的.
+
+```javascript
+Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
+```
+
 ### 事件
 方法: [ `on` | `once` | `off` ]
 
 事件类型: [ `forward` | `back` | `refresh` | `reset` ]
 
 参数( `to` | `from` ) 的属性:
-- name
+- `name`
   - 类型: string
-  - 描述: 与路由对应的组件的名称
-- route:
+  - 描述: 路由的名称（包含key）
+- `route`
   - 类型: object
   - 描述: vue-route的路由信息对象
 
@@ -76,27 +101,6 @@ this.$navigation.off('refresh', (to, from) => {})
 this.$navigation.on('reset', () => {})
 ```
 
-### 搭配vuex2使用
-
-main.js
-
-```javascript
-import Vue from 'vue'
-import router from './router' // vue-router instance
-import store from './store' // vuex store instance
-import Navigation from 'vue-navigation'
-
-Vue.use(Navigation, {router, store})
-// bootstrap your app...
-```
-
-传入 `store` 后，`vue-navigation` 会向 `store` 注册一个Module（Module的默认名称为 `navigation`），同时在页面跳转时会提交 `navigation/FORWARD` 或 `navigation/BACK` 或 `navigation/REFRESH`。
-
-你可以自己设置Module的名称：
-
-```javascript
-Vue.use(Navigation, {router, store, moduleName: 'name'})
-```
 ## 方法
 
 在全局环境中使用 `Vue.navigation` 或在Vue实例中使用 `this.$navigation`

build/rollup.config.js

@@ -1,5 +1,5 @@
 const version = require('../package.json').version
-const buble = require('rollup-plugin-buble')
+const babel = require('rollup-plugin-babel')
 const progress = require('rollup-plugin-progress')
 const filesize = require('rollup-plugin-filesize')
 
@@ -14,7 +14,7 @@ const config = {}
 config.entry = {
   entry: 'src/index.js',
   plugins: [
-    buble(), progress(), filesize()]
+    babel(), progress(), filesize()]
 }
 config.bundles = [{
   banner: banner,