Vue - Can I change a routers component based on the value of an item in the store?

Viewed 50

So I want to change a routers component based on a state in my store. This means that, depending on the state in the store, the router can display a different template page.

Router.js:

import Router from 'vue-router'
import store from './store'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Homepage',
      component: () => import('@/' + store.state.theme.path + '/components/Hello')
    },
    {
      path: '/admin',
      name: 'Admin',
      component: () => import('@/cms/components/Admin')
    }
  ]
})

Store.js:

import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        theme: {
            path:'theme-00'
        }
    },
    getters: {
        theme: state => {
            return state.theme.path;
        }
    }
});

Any help is welcome! Thanks, Justin.

0 Answers
Related