vue-router-redux

vue-router-redux(3) -- effortlessly keep vue-router and redux store in sync

usage

$ npm install --save vue-router-redux
# or
$ yarn add vue-router-redux

import Vue from 'vue'
import VueRouter from 'vue-router'
import {createStore, applyMiddleware, combineReducers} from 'redux'
import {sync, routerReducer as route, routerMiddleware} from 'vue-router-redux' 

Vue.use(VueRouter)

const router = new VueRouter(/* routes */)

const store = createStore(
  combineReducers({route}),
  applyMiddleware(routerMiddleware(router))

sync(store, router) // done.

// bootstrap your app...

how does it work?

• it adds a route module into the store, which contains the state representing the current route:

store.route.current.path   // current path (string)
store.route.current.params // current params (object)
store.route.current.query  // current query (object)

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