[Vuejs]-How to get a key from route module using vuex-router-sync

0👍

Found a solution that works quite well. vuex-router-sync fires an action to telling us that the route has changed. Within one of our existing modules you can listen out of this and make a subsequent mutation. For me this would be setting the title from the router/ROUTE_CHANGED action payload.

router.js

const router = [
  {
    name: 'Cheese',
    path: 'cheese',
    component: Cheese,
    meta: { title: 'Calendar', requiresAuth: true }
  },
]

module1.js

import * as types from '../mutation-types'

// Initial State
const state = {
 cheese: true,
 title: 'App'
}

// Getters
export const getters = {
  getRouteTitle: state => state.title
}

// Mutations
export const mutations = {
  'router/ROUTE_CHANGED' (state, payload) {
    state.title = payload.to.meta.title
  }
}

export default {
  getters,
  mutations,
  state
}

Hope that makes sense and please let me know if there is a better solution 🙂

******* UPDATE *********

A super easy way is just to get the $router instance in your component like this:

<h1>{{$route.name}}</h1>

Which would render to:

<h1>Cheese</h1>

Leave a comment