Level 4
So, I've dug a little deeper, and I've decided to go down a different route.
I've gone with using default Spark functionality, specifically using the tab-state mixin and the sparkHashChanged event.
So, in my home component:
Vue.component('home', {
props: ['user'],
/**
* Load mixins for the component.
*/
mixins: [require('./../spark/mixins/tab-state')],
ready() {
this.usePushStateForTabs('.spark-settings-tabs');
}
});
Then:
Vue.component('courses', {
data() {
return {
test: ''
}
},
ready() {
//
},
events: {
/**
* Handle the Spark tab changed event.
*/
sparkHashChanged(hash) {
if (hash == 'courses') {
this.getTest();
}
return true;
}
},
methods: {
getTest() {
this.$http.get('/dashboard/test')
.then(response => {
this.test = response.data;
});
}
}
});
In my component, and finally setting up my primary layout and tab content as per Spark settings views.
Seems to work pretty well.
This is only basic at the moment, so I may come across issues as I build out functionality, but so far so good.
I can create individual views tied to specific Spark components, that pull through and render whatever data I want, but only load it once the hash has changed. Pretty decent stuff.
I'll probably look deeper into vue-router at a later date. Any questions, let me know.
