How to use vuex-router-sync - 10 common examples

resetStore ({commit, state, dispatch}) {
    store.unsyncRouter()
    // store.replaceState(copyObj(store.initialStateCopy))
    Object.keys(store._modulesNamespaceMap).forEach(ns => {
      const mutation = ns + 'resetStateData'
      if (!this._mutations[mutation]) return
      commit(mutation)
    })
    store.unsyncRouter = sync(store, Router)
    console.log('reset store complete!')
  },
  apiError ({state, getters}, {error, method}) {

// vendor
import 'bootstrap/dist/css/bootstrap.min.css'

// components
import Forms from './components/Forms'
import Hello from './components/Hello'

// config
import Config from '../config/custom'

Vue.config.debug = true
Vue.use(VueRouter)
Vue.use(VueSocketio, Config.socket.server)

let router = new VueRouter()
sync(store, router)

/*
store.watch(function (val) {
  console.log(val)
})
*/

router.map({
  '/': {
    component: Forms
  },
  '/forms': {
    component: Forms
  },
  '/hello': {
    component: Hello

import Vue from 'vue'
import VueResource from 'vue-resource'

import Router from './routes'
import App from './App.vue'
import { store } from './store/store'
import { sync } from 'vuex-router-sync'
import Vue2TouchEvents from 'vue2-touch-events'
 
Vue.use(Vue2TouchEvents)

Vue.use(VueResource)

const unsync = sync(store, Router)

Vue.http.interceptors.push((request, next) => {
    console.log(request);
    next();
});

console.log('store: ', store)

Router.beforeEach((to, from, next) => {
  if (to.meta && to.meta.loadUser) {
    // authentication is required
    console.log('must load user')
    store.dispatch('user/loadUser').then(() => {
      store.dispatch('mqtt/startClient')
      next()
    }, (err) => {

const i18n = new VueI18Next(localeManager.getI18n())
  Vue.use(Element, {
    size: 'mini',
    i18n: (key, value) => i18n.t(key, value)
  })
  Vue.use(Msg, Message, {
    showClose: true
  })

  const loading = Loading.service({
    fullscreen: true,
    background: 'rgba(0, 0, 0, 0.1)'
  })
  Vue.component('mo-icon', Icon)

  sync(store, router)

  /* eslint-disable no-new */
  window.app = new Vue({
    components: { App },
    router,
    store,
    i18n,
    template: ''
  }).$mount('#app')

  setTimeout(() => {
    loading.close()
  }, 400)
}

import './components'

// Plugins
import './plugins'

// Sync router with store
import { sync } from 'vuex-router-sync'

// Application imports
import App from './App'
import i18n from '@/i18n'
import router from '@/router'
import store from '@/store'

// Sync store with router
sync(store, router)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

{path: 'entries', component: AdminEntryList},
      {path: 'entry/edit/:id', component: AdminEntryEdit},
    ]
  },

  {path: '*', component: Error404},
]


const router = new VueRouter({
  routes,
  history: false,
})

// Sync Vuex and vue-router;
sync(store, router)

/**
 * Authenticated routes
 */
router.beforeEach(async (to, from, next) => {
  if (! store.state.auth.me && ! store.state.auth.authChecked) {
    await store.dispatch('checkLogin')
      .catch(() => {})
  }
  const me = store.state.auth.me

  if (to.matched.some(record => record.meta.guestOnly) && me) {
    // Guest only page, dont follow there when user is authenticated
    next(false)
  } else if (to.matched.some(record => record.meta.requiresAuth) && ! me) {
    // if route requires auth and user isn't authenticated

Vue.use(VueRouter)

// install vue-moment filter
Vue.use(VueMoment)

// register filters globally
Vue.filter('zeroPad', zeroPad)

// create router
const router = new VueRouter({
  mode: 'history',
  routes
})

// synchronize vue-router routes with vuex
sync(store, router)

window.vueRouter = router

const app = new Vue({
  router, 
  store,
  ...App
}).$mount('#app')

export function createApp () {
  // 同步路由状态(route state)到 store
  sync(store, router)
  // 创建应用程序实例，将 router 和 store 注入
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })
  // 暴露 app, router 和 store。
  return {app, router, store}
}

export function createApp() {
  // sync the router with the vuex store.
  // this registers `store.state.route`
  sync(store, router);

  // create the app instance.
  // here we inject the router, store and ssr context to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  });

  // Initial check for user being logged in or not
  if (typeof window !== 'undefined') {
    document.addEventListener('DOMContentLoaded', function(event) {
      if (
        window.__PRELOADEDSTATE__ &&
        window.__PRELOADEDSTATE__[ACCESS_TOKEN]

export function createApp() {
  // create store and router instances
  // sync the router with the vuex store.
  // this registers `store.state.route`
  sync(store, router)

  // create the app instance.
  // here we inject the router, store and ssr context to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  // expose the app, the router and the store.
  // note we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return {
    app,
    router,