Resolve dependencies for your routes before rendering the component
Vue-resolve
A VueJS (2.x) / Vue-router plugin that resolves dependencies for routes before entering.
What is this?
A plugin that reads a meta.resolve property on your component's route and resolve it (as a promise) before serving the route.
Install
Install from npm:
npm install vue-resolve --save
or from yarn:
yarn add vue-resolve
Example
...
import VueResolve from 'vue-resolve';
const router = new VueRouter({
routes: [{
path: '/',
component: mycomp,
meta: {
resolve: {
mydata() {
return axios.get('/api/data');
}
}
}
}]
});
Vue.use(VueResolve, {
router,
dataProperty: 'data',
});
new Vue({
...
router,
});
Important:
For reactivity please make sure to define the data properties your route is going to populate in your component, so Vue can keep track of changes after the routes resolves. (e.g. on the mycomp
component, must exist a mydata
data)