feat: ability to check push vs replace in navigation guard

iceprosurface · iceprosurface · commit 47a85aab7437 · 2021-10-26T16:44:54.000+08:00
issue vuejs#1620 pull request vuejs#1906
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,77 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const store = Vue.observable({
+  replace: false,
+  time: new Date().getTime()
+})
+
+const computed = {
+  replace () {
+    return store.replace
+  },
+  time () {
+    return store.time
+  }
+}
+
+const Home = { computed, template: '<div>home {{replace}} {{time}}</div>' }
+const Page = { computed, template: '<div>page {{replace}} {{time}}</div>' }
+const Detail = { computed, template: '<div>detail {{replace}} {{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) => {
+  store.replace = to.replace
+  store.time = new Date().getTime()
+  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: 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: 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),

Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,7 @@ export function normalizeLocation (`
`64`	`64`	`_normalized: true,`
`65`	`65`	`path,`
`66`	`66`	`query,`
`67`		`- hash`
	`67`	`+ hash,`
	`68`	`+ replace: !!next.replace`
`68`	`69`	`}`
`69`	`70`	`}`