vue-登录路由跳转到主页后开始加载菜单数据

最新推荐文章于 2026-04-20 20:59:38 发布

原创最新推荐文章于 2026-04-20 20:59:38 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

60 篇文章 4 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文探讨了在Vue应用中，如何在主页加载时通过路由触发菜单数据的获取。介绍了在Home.vue组件的created钩子中调用获取菜单数据的方法，并在methods中实现了异步获取菜单数据的函数。

情景：

点击登录后，是通过路由跳转到主页，此时是没有发出菜单数据请求的，什么时候发起呢？

应该在Home.vue整个页面加载的时候，就应该立即发送请求获取左侧菜单数据

在哪里写这个请求代码呢？

1.created中调用

created () {
    this.getMenuList()
}

2.methods中实现

methods: {
    // 获取所有的菜单
    async getMenuList() {
      // 利用对象结构获取等号右边对象的data属性，用res变量接收
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.console.error(res.meta.msg)
      this.menuList = res.data
    }
  }

插一句：element-ui中每个组件名称就是一个类名，可以直接通过比如：点el-header为它设置css