vue-router#2607

abstract mode's router.back() was aborted when there are 2 same routes in history stack

by Rocka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<div id="app">
  <button @click="back">back</button>
  <button @click="togglePlayer">togglePlayer</button>
  <div class="view">
    <transition :name="transitionName">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
  <ol>
    <li v-for="h in $router.history.stack">{{h.path}}</li>
  </ol>
</div>

CSS

.tan   { background-color: tan        }
.blue  { background-color: dodgerblue }
.pink  { background-color: lightpink  }
.green { background-color: limegreen  }

.view {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
}

Vue

Vue.use(VueRouter);

const Search = Vue.component('search', {
	template: `
  <div class="page tan">
  	<p>search results</p>
    <router-link to="/song/1">1. song</router-link>
  </div>`
})

const Song = Vue.component('song', {
	template: `
  <div class="page blue">
  	<p>song #{{$route.params.id}}</p>
    <router-link to="/artist/10">artist #10</router-link>
  </div>`
})

const Artist = Vue.component('artist', {
	template: `
  <div class="page pink">
  	<p>artist #{{$route.params.id}}</p>
    Artist description
  </div>`
})

const Player = Vue.component('player', {
	template: `
  <div class="page">
  	<p>Pretty Music Player</p>
    <router-link to="/artist/10" replace>artist #10</router-link>
  </div>`
})

new Vue({
  el: "#app",
  router: new VueRouter({
  	mode: 'abstract',
  	routes: [
      { path: '/', redirect: '/search' },
      { path: '/search', component: Search },
      { path: '/song/:id', component: Song },
      { path: '/artist/:id', component: Artist },
      { path: '/player', component: Player }
    ]
  }),
  data() { return { transitionName: 'slide-right' } },
  methods: {
  	back() { this.$router.back() },
    togglePlayer() {
    	if (this.$route.path === '/player') this.$router.back();
      else this.$router.push('/player')
    }
  },
  created() {
    this.$router.push({ path: '/' });
  }
})