feat: ability to check push vs replace in navigation guard

issue vuejs#1620 pull request vuejs#1906
iceprosurface · Oct 26, 2021 · 3a249ca · 3a249ca
1 parent 221e8b3
commit 3a249ca
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 1 deletion.
diff --git a/examples/index.html b/examples/index.html
@@ -27,6 +27,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="auth-flow">Auth Flow</a></li>
     <li><a href="discrete-components">Discrete Components</a></li>
     <li><a href="nested-router">Nested Routers</a></li>
+    <li><a href="push-or-replace">Push Or Replace</a></li>
     <li><a href="keepalive-view">Keepalive View</a></li>
     <li><a href="multi-app">Multiple Apps</a></li>
     <li><a href="restart-app">Restart App</a></li>

diff --git a/examples/push-or-replace/app.js b/examples/push-or-replace/app.js
@@ -0,0 +1,72 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div>home {{$route.query.time}}</div>' }
+const Page = { template: '<div>page {{$route.query.time}}</div>' }
+const Detail = { template: '<div>detail {{$route.query.time}}</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/', component: Home },
+
+    { path: '/page', component: Page },
+
+    { path: '/detail', component: Detail }
+
+  ]
+})
+
+// User can check the replace type in navigation guard, and do anything they want.
+router.beforeEach((to, from, next) => {
+  if (to.replace) {
+    to.query.replace = true
+  } else {
+    to.query.replace = false
+  }
+
+  if (to && to.query && !to.query.time) {
+    to.query.time = new Date().getTime()
+    next(to)
+  } else {
+    next()
+  }
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Push Or Replace</h1>
+      <p>User can check the replace type in navigation guard, and do anything they want.</p>
+      <pre>
+router.beforeEach((to, from, next) => {
+  if (to.replace) {
+    to.query.replace = true
+  }
+  else {
+    to.query.replace = false
+  }
+  if (to && to.query && !to.query.time) {
+    to.query.time = new Date().getTime()
+    next(to)
+  } else {
+    next()
+  }
+})
+      </pre>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/page">/page</router-link> ( push )</li>
+        <li><a @click="$router.push('/page')">/page</a> $router.push('/page') </li>
+        <li><router-link to="/detail" replace>/detail</router-link> ( replace )</li>
+        <li><a @click="$router.replace('/detail')">/detail</a> $router.replace('/detail') </li>
+        <li><a @click="$router.go(-1)">back</a> $router.go(-1) </li>
+      </ul>
+      <router-view class="view"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/push-or-replace/index.html b/examples/push-or-replace/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/push-or-replace.js"></script>
diff --git a/src/history/hash.js b/src/history/hash.js
@@ -71,6 +71,12 @@ export class HashHistory extends History {
 
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const { current: fromRoute } = this
+    if (typeof location === 'string') {
+      location = { path: location }
+    }
+    if (typeof location === 'object' && !location.replace) {
+      (location: Object).replace = true
+    }
     this.transitionTo(
       location,
       route => {

diff --git a/src/history/html5.js b/src/history/html5.js
@@ -66,6 +66,12 @@ export class HTML5History extends History {
 
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const { current: fromRoute } = this
+    if (typeof location === 'string') {
+      location = { path: location }
+    }
+    if (typeof location === 'object' && !location.replace) {
+      (location: Object).replace = true
+    }
     this.transitionTo(location, route => {
       replaceState(cleanPath(this.base + route.fullPath))
       handleScroll(this.router, route, fromRoute, false)

diff --git a/src/util/location.js b/src/util/location.js
@@ -64,6 +64,7 @@ export function normalizeLocation (
     _normalized: true,
     path,
     query,
-    hash
+    hash,
+    replace: !!next.replace
   }
 }
diff --git a/src/util/route.js b/src/util/route.js
@@ -23,6 +23,7 @@ export function createRoute (
     meta: (record && record.meta) || {},
     path: location.path || '/',
     hash: location.hash || '',
+    replace: !!location.replace,
     query,
     params: location.params || {},
     fullPath: getFullPath(location, stringifyQuery),