为什么computed会在我另一个方法走到一半的时候就执行了

Question

问题描述

最近在学习vue，今天跟着视频写了一个路由守卫，是除非去登录页面，否则就得执行initMenu方法来加载一遍菜单栏。当我输入/home请求时，我的initMenu方法还没执行到底，结果Home.vue页面的computed居然先插一脚把自己给执行了，然后再执行剩下的initMenu方法里的内容，这是为什么？

代码

路由守卫代码如下

router.beforeEach((to, from, next) => {
  /* '/'会跳转到登录页面 */
  if(to.path == '/') {
      next();
  } else {
      /* 其他请求都要先走一遍initMenu方法 */
      initMenu(router, store);
      next();
  }
})

这是我的initMenu方法代码

/*
这个方法是把需要动态添加的路由数组添加到vuex的store中
fotmatRoutes方法:  格式化由后端请求到的路由数组
fmtRoutes:         待添加的路由数组
getRequest方法:    我封装的一个axios请求
*/
export const initMenu = (router, store) => {
    if(store.state.routes.length > 0) {
        console.log("有数据");
        // 有菜单数据
        return;
    }
    console.log("1.没有数据");
    getRequest("/system/config/menu").then(data=>{
        if(data){
            let fmtRoutes = formatRoutes(data);
            router.addRoutes(fmtRoutes);
            console.log("2.已有路由");
            console.log(router.options.routes);
            console.log("===================");
            console.log("3.待添加的路由");
            console.log(fmtRoutes);
            store.commit('initRoutes', fmtRoutes);
            console.log("4.添加后");
            console.log(store.state.routes);
        }
    })
}

这是getRequest方法的代码

/* get请求封装 */
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
};

这是我的Home.vue页面里的computed代码

computed: {
        routes() {
            console.log("5.来自Home页面 - 用于遍历的routes:");
            console.log(this.$store.state.routes);
            return this.$store.state.routes;
        }
  }

输入/home后控制台信息如下

Answer 1

getRequest("/system/config/menu") 请求是异步的，可以改成同步的 async await写法