vuex-router-sync (with previous route)

Effortlessly keep vue-router and vuex store in sync.

Note: requires vuex>=0.6.2.

Usage

1npm install vuex-router-sync-previous

1import { sync } from 'vuex-router-sync-previous'
2import store from './vuex/store' // vuex store instance
3import router from './router' // vue-router instance
4
5sync(store, router) // done.
6
7// bootstrap your app...

How does it work?

• It adds a route and a previousRoute module into the store, which contains the state representing the current and previous route:

  1store.state.route.path   // current path (string)
  2store.state.route.params // current params (object)
  3store.state.route.query  // current query (object)
  4
  5store.state.previousRoute.path // previous path (string)
  6store.state.previousRoute.params // previous params (object)
  7store.state.previousRoute.query // previous query (object)

• When the router navigates to a new route, the store's state is updated.

• store.state.route and store.state.previousRoute are immutable, because it is derived state from the URL, which is the source of truth. You should not attempt to trigger navigations by mutating the route object. Instead, just call $router.go(). Note that you can do $router.go({ query: {...}}) to update the query string on the current path.

License

MIT