1、装置
npm i vuex-router-sync --save
2、应用
import { sync } from 'vuex-router-sync'import store from './vuex/store'import router from './router'sync(store, router, {moduleName: 'RouteModule'})const app = new Vue({ router, store,}).$mount('#app');打印store.state即可看到以后路由状态
3、应用场景
如果您想在一个组件中显示一条音讯，心愿在简直每一个页面上都显示“Have a nice day, Jack”，除了首页，因为首页要显示"Welcome back, Jack".
借助vuex-router-sync，您能够轻松实现
const Top = { template: '<div>{{message}}</div>', computed: { message() { return this.$store.getters.getMessage; } },};const Bar = { template: '<div>{{message}}</div>', computed: { message() { return this.$store.getters.getMessage; } }};const routes = [{ path: '/top', component: Top, name: 'top' }, { path: '/bar', component: Bar, name: 'bar' },];const router = new VueRouter({ routes});const store = new Vuex.Store({ state: { username: 'Jack', phrases: ['Welcome back', 'Have a nice day'], }, getters: { getMessage(state) { return state.route.name === 'top' ? `${state.phrases[0]}, ${state.username}` : `${state.phrases[1]}, ${state.username}`; }, },});// sync store and router by using `vuex-router-sync`sync(store, router);const app = new Vue({ router, store,}).$mount('#app');不然的话，你可能须要在vue-router的钩子函数里监听，或在watch里$route，而后批改store值来实现。
4、原理
在70多行的vuex-router-sync源代码里有以下几段代码
store.registerModule(moduleName, { namespaced: true, state: cloneRoute(router.currentRoute), mutations: { 'ROUTE_CHANGED': function ROUTE_CHANGED (state, transition) { store.state[moduleName] = cloneRoute(transition.to, transition.from) } }})首先是在咱们的store中注册了一个module,名字默认为route:
module中提供了一个叫ROUTE_CHANGED的mutation解决办法,而后还把router对象中的currentRoute保留在了state中,这也是咱们为什么可能通过this.$store.state.route拿到currentRoute的起因。
而后就是监听store中的route对象的变动了,当route发生变化并且以后路由名字不等于须要跳转到路由的时候,间接通过router的push办法进行跳转页面：
var storeUnwatch = store.watch( function (state) { return state[moduleName]; }, function (route) { var fullPath = route.fullPath; if (fullPath === currentPath) { return } if (currentPath != null) { isTimeTraveling = true router.push(route) } currentPath = fullPath }, { sync: true })store的watch办法跟vue中的watch是一个概念,也就是检测某个属性的变动,而后回调。
最初通过router的全局后置钩子函数监听以后路由对象,批改store中的以后state(以后路由对象)：
// sync store on router navigationvar afterEachUnHook = router.afterEach(function (to, from) { if (isTimeTraveling) { isTimeTraveling = false return } currentPath = to.fullPath store.commit(moduleName + '/ROUTE_CHANGED', { to: to, from: from })})————————————————
版权申明：本文为CSDN博主「天空还下着雪」的原创文章，遵循CC 4.0 BY-SA版权协定，转载请附上原文出处链接及本申明。
原文链接：https://blog.csdn.net/u010081...