A simple VueJS package to extend vue-router with a back button.
Sure thing, but the in browser history does not account for programatic navigation. This is where vue-router-back-button comes in. This package does not just sends you to the previous route. Instead it tracks your navigation and sends you back to where you came from.
Overview page > show page > edit page After save, a programatic navigation to show page > go back will take you to edit page
Overview page > show page > edit page After save, a programatic navigation to show page > go back will take you to overview page as intented
- vue >2.3.3
- vue-router >2.6.0
npm install vue-router-back-button --save-dev
Tell Vue to use routerHistory and add writeHistory as Global After Hook.
import Vue from 'vue'
import Router from 'vue-router'
import { routerHistory, writeHistory } from 'vue-router-back-button'
Vue.use(Router)
Vue.use(routerHistory)
const router = new Router({
routes: []
})
router.afterEach(writeHistory)
You can add this anywhere in your app as $routerHistory is installed globally. If you can't go back, $routerHistory.previous().path will return null.
<router-link
v-if="$routerHistory.hasPrevious()"
:to="{ path: $routerHistory.previous().path }">
GO BACK
</router-link>
If you went back, you might want to undo that action right? Well now you can go forward as well!
<router-link
v-if="$routerHistory.hasForward()"
:to="{ path: $routerHistory.next().path }">
GO FORWARD
</router-link>
Function | Description |
---|---|
previous () | Returns the previous visited path in an object |
hasPrevious() | Returns true if the user can go back |
next () | Returns the next visited path in an object, this happens when a user went back |
hasForward () | Returns true if the user can go forward |
- Add an es5 build for people who sadly aren't using es6
- Add Testing
Feel free to send PR's or request new features (I'll might need to rename this to vue-router-history if you do though)
Maxim Vanhove Web developer at Starring Jane