hack vue-router replace, fixed #11

README.md

@@ -88,7 +88,7 @@ Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
 ## Events
 functions: [ `on` | `once` | `off` ]
 
-event types: [ `forward` | `back` | `refresh` | `reset` ]
+event types: [ `forward` | `back` | `replace` | `refresh` | `reset` ]
 
 parameter( `to` | `from` ) properties:
 - `name`
@@ -101,6 +101,7 @@ parameter( `to` | `from` ) properties:
 ```javascript
 this.$navigation.on('forward', (to, from) => {})
 this.$navigation.once('back', (to, from) => {})
+this.$navigation.on('replace', (to, from) => {})
 this.$navigation.off('refresh', (to, from) => {})
 this.$navigation.on('reset', () => {})
 ```

README_CN.md

@@ -87,7 +87,7 @@ Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
 ### 事件
 方法: [ `on` | `once` | `off` ]
 
-事件类型: [ `forward` | `back` | `refresh` | `reset` ]
+事件类型: [ `forward` | `back` | `replace` | `refresh` | `reset` ]
 
 参数( `to` | `from` ) 的属性:
 - `name`
@@ -100,6 +100,7 @@ Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
 ```javascript
 this.$navigation.on('forward', (to, from) => {})
 this.$navigation.once('back', (to, from) => {})
+this.$navigation.on('replace', (to, from) => {})
 this.$navigation.off('refresh', (to, from) => {})
 this.$navigation.on('reset', () => {})
 ```

examples/src/App.vue

@@ -19,6 +19,9 @@
       this.$navigation.on('back', (to, from) => {
         console.log('back to', to, 'from ', from)
       })
+      this.$navigation.on('replace', (to, from) => {
+        console.log('replace to', to, 'from ', from)
+      })
       this.$navigation.on('refresh', (to, from) => {
         console.log('refresh to', to, 'from ', from)
       })

examples/src/pages/detail.vue

@@ -3,6 +3,8 @@
     <div class="detail">
       <p>This is the <b>detail</b> page, detail id is {{id}}</p>
       <p>random number: {{random}}</p>
+      <a href="javascript:void(0)" @click="replaceToNextDetail">replace to next detail</a>
+      <br>
       <a href="javascript:void(0)" @click="goToNextDetail">go to next detail</a>
       <br>
       <a href="javascript:void(0)" @click="goToIndex">go to index</a>
@@ -28,6 +30,9 @@
       // console.log('detail deactivated')
     },
     methods: {
+      replaceToNextDetail() {
+        this.$router.replace(`/list/${this.id >= 30 ? 30 : this.id + 1}`)
+      },
       goToNextDetail() {
         this.$router.push(`/list/${this.id >= 30 ? 30 : this.id + 1}`)
       },

examples/src/store/index.js

@@ -8,18 +8,21 @@ const store = new Vuex.Store({
     app: 'examples'
   },
   mutations: {
-    'navigation/FORWARD': (state, {to, from}) => {
-      console.log('navigation/FORWARD', to, from)
-    },
-    'navigation/BACK': (state, {to, from}) => {
-      console.log('navigation/BACK', to, from)
-    },
-    'navigation/REFRESH': (state, {to, from}) => {
-      console.log('navigation/REFRESH', to, from)
-    },
-    'navigation/RESET': () => {
-      console.log('navigation/RESET')
-    }
+    // 'navigation/FORWARD': (state, {to, from}) => {
+    //   console.log('navigation/FORWARD', to, from)
+    // },
+    // 'navigation/BACK': (state, {to, from}) => {
+    //   console.log('navigation/BACK', to, from)
+    // },
+    // 'navigation/REPLACE': (state, {to, from}) => {
+    //   console.log('navigation/REPLACE', to, from)
+    // },
+    // 'navigation/REFRESH': (state, {to, from}) => {
+    //   console.log('navigation/REFRESH', to, from)
+    // },
+    // 'navigation/RESET': () => {
+    //   console.log('navigation/RESET')
+    // }
   }
 })
 

src/index.js

@@ -13,21 +13,29 @@ export default {
     const bus = new Vue()
     const navigator = Navigator(bus, store, moduleName, keyName)
 
+    // hack vue-router replace for replaceFlag
+    const routerReplace = router.replace.bind(router)
+    let replaceFlag = false
+    router.replace = (location, onComplete, onAbort) => {
+      replaceFlag = true
+      routerReplace(location, onComplete, onAbort)
+    }
+
     // init router`s keyName
     router.beforeEach((to, from, next) => {
       if (!to.query[keyName]) {
         const query = {...to.query}
         query[keyName] = genKey()
-        next({path: to.path, query, replace: !from.query[keyName]})
+        next({path: to.path, query, replace: replaceFlag || !from.query[keyName]})
       } else {
         next()
       }
     })
 
     // record router change
     router.afterEach((to, from) => {
-      navigator.record(to, from)
-      // router.push({path: to.path, query: to.query})
+      navigator.record(to, from, replaceFlag)
+      replaceFlag = false
     })
 
     Vue.component('navigation', NavComponent(keyName))

src/navigator.js

@@ -14,6 +14,9 @@ export default (bus, store, moduleName, keyName) => {
         'navigation/BACK': (state, {to, from, count}) => {
           state.routes.splice(state.routes.length - count, count)
         },
+        'navigation/REPLACE': (state, {to, from, name}) => {
+          state.routes.splice(Routes.length - 1, 1, name)
+        },
         'navigation/REFRESH': (state, {to, from}) => {
         },
         'navigation/RESET': (state) => {
@@ -26,29 +29,40 @@ export default (bus, store, moduleName, keyName) => {
   const forward = (name, toRoute, fromRoute) => {
     const to = {route: toRoute}
     const from = {route: fromRoute}
-    const route = store ? store.state[moduleName].routes : Routes
+    const routes = store ? store.state[moduleName].routes : Routes
     // if from does not exist, it will be set null
-    from.name = route[route.length - 1] || null
+    from.name = routes[routes.length - 1] || null
     to.name = name
-    store ? store.commit('navigation/FORWARD', {to, from, name}) : route.push(name)
-    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(route)
+    store ? store.commit('navigation/FORWARD', {to, from, name}) : routes.push(name)
+    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(routes)
     bus.$emit('forward', to, from)
   }
   const back = (count, toRoute, fromRoute) => {
     const to = {route: toRoute}
     const from = {route: fromRoute}
-    const route = store ? store.state[moduleName].routes : Routes
-    from.name = route[route.length - 1]
-    to.name = route[route.length - 1 - count]
-    store ? store.commit('navigation/BACK', {to, from, count}) : route.splice(Routes.length - count, count)
-    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(route)
+    const routes = store ? store.state[moduleName].routes : Routes
+    from.name = routes[routes.length - 1]
+    to.name = routes[routes.length - 1 - count]
+    store ? store.commit('navigation/BACK', {to, from, count}) : routes.splice(Routes.length - count, count)
+    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(routes)
     bus.$emit('back', to, from)
   }
+  const replace = (name, toRoute, fromRoute) => {
+    const to = {route: toRoute}
+    const from = {route: fromRoute}
+    const routes = store ? store.state[moduleName].routes : Routes
+    // if from does not exist, it will be set null
+    from.name = routes[routes.length - 1] || null
+    to.name = name
+    store ? store.commit('navigation/REPLACE', {to, from, name}) : routes.splice(Routes.length - 1, 1, name)
+    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(routes)
+    bus.$emit('replace', to, from)
+  }
   const refresh = (toRoute, fromRoute) => {
     const to = {route: toRoute}
     const from = {route: fromRoute}
-    const route = store ? store.state[moduleName].routes : Routes
-    to.name = from.name = route[route.length - 1]
+    const routes = store ? store.state[moduleName].routes : Routes
+    to.name = from.name = routes[routes.length - 1]
     store ? store.commit('navigation/REFRESH', {to, from}) : null
     bus.$emit('refresh', to, from)
   }
@@ -58,15 +72,19 @@ export default (bus, store, moduleName, keyName) => {
     bus.$emit('reset')
   }
 
-  const record = (toRoute, fromRoute) => {
+  const record = (toRoute, fromRoute, replaceFlag) => {
     const name = getKey(toRoute, keyName)
-    const toIndex = Routes.lastIndexOf(name)
-    if (toIndex === -1) {
-      forward(name, toRoute, fromRoute)
-    } else if (toIndex === Routes.length - 1) {
-      refresh(toRoute, fromRoute)
+    if (replaceFlag) {
+      replace(name, toRoute, fromRoute)
     } else {
-      back(Routes.length - 1 - toIndex, toRoute, fromRoute)
+      const toIndex = Routes.lastIndexOf(name)
+      if (toIndex === -1) {
+        forward(name, toRoute, fromRoute)
+      } else if (toIndex === Routes.length - 1) {
+        refresh(toRoute, fromRoute)
+      } else {
+        back(Routes.length - 1 - toIndex, toRoute, fromRoute)
+      }
     }
   }