Vue-学习小结1 ：二级菜单中的路由组件未正常显示

原创

已于 2022-06-05 11:48:22 修改 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-11 14:33:18 首次发布

在Vue项目中，一级路由【商品管理】下的二级菜单【品牌管理】未正常显示。排查过程包括检查二级路由配置、路由组件遍历、user仓库中的resultAllRoutes数据、mutations的SET_RESULTASYNCROUTES方法、computedAsyncRoutes计算逻辑，以及服务器返回的权限码。发现本地路由name为'TradeMark'与服务器返回的'Trademark'不匹配，修改后问题解决。

页面展示状态：

在一级路由组件【商品管理】下，正常应显示4个二级菜单，缺少【品牌管理】的展示

1、检查该路由下，所有的二级路由是否添加和格式规范。暂未发现问题

export const asyncRoutes=[
  // 商品管理
  {
    path:'/product',
    component:Layout,   
    name:'Product',      // 一级路由的名字
    meta:{title:'商品管理',icon:'el-icon-goods'},
    children:[
      {
        path:'tradeMark',
        name:'TradeMark',
        component:()=>import('@/views/product/tradeMark'),
        meta:{title:'品牌管理'}
      },
      {
        path:'attr',
        name:'Attr',
        component:()=>import('@/views/product/Attr'),
        meta:{title:'平台属性管理'}
      },
      {
        path:'spu',
        name:'Spu',
        component:()=>import('@/views/product/Spu'),
        meta:{title:'Spu管理'}
      },
      {
        path