Vue在渲染页面前加载ajax请求返回的数据

在Vue项目中遇到了这样的需求：

前端某个页面的结构是一个父组件，多个子组件通过前端路由跳转，子组件中有几个共用的下拉框，下拉框的数据从后端加载。

 

设计是：

先通过ajax请求从后端加载数据，缓存在另一个组件，再渲染子组件。确保只加载一次且渲染子组件前数据已经加载。

 

具体的实现方法是：

用Vue-Router提供的导航守卫（见官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html），在前端路由跳转到某个子组件前检查数据是否已加载，没加载就发ajax请求，等请求返回再继续跳转。

 

单个ajax请求时的代码应该是这样的：

beforeEnter: (to, from, next) => {
    if (dropDownBox.isEmpty()) {
        axios({
            url: baseUrl + "/category/query_IdAndName",
            method: 'post'
        }).then(res => {
            dropDownBox.subjectCategory = res.data;
            next();
        });
    } else {
        next();
    }
}

有多个ajax请求时可以用axios.all()。