【vue】sideMenu 不显示 meta失效解决方法

下面展示一些 内联代码片。

//报错信息：显示  cannot read  properties （）.children  说明this.mainMenu 此时undefined

解决方法：在basicLayout.vue里注释掉校验语句，改成this.menus = this.mainMenu

// An highlighted block
 created () {
    // this.menus = this.mainMenu.find(item => item.name === 'admin').children //对路由进行校验
    this.menus = this.mainMenu
    this.collapsed = !this.sidebarOpened
  },

在permission.js文件里 手动添加路径

// An highlighted block
const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: [
    //以下内容为 router.config.js 文件里 拷贝过来
      {
        path: '/',
        name: 'index',
        // component: PageView,
        redirect: '/file',
        meta: { title: '主页' },
        children: [
          {
            path: '/file',
            name: 'file',
            component: () => import('@/views/file/File'),
            meta: { title: '事项页123', keepAlive: true, permission: [] }
          },
          {
            path: '/search',
            name: 'search',
            component: () => import('@/views/search/searchTable'),
            meta: { title: 'search', keepAlive: true }
          }
        ]
      }
    ],

之所以这么做是因为，在main.js文件里 permission权限关掉了

下面展示内联代码片。

// permission语句被注释

// An highlighted block
import bootstrap from './core/bootstrap'
import './core/lazy_use'
// import './permission' // permission control
import './utils/filter' // global filter
import './utils/base64'

请教同事

下面展示一些 内联代码片。

1.找绑定的数据变量 menu

// basicLayout .vue文件

// html5 定位到 代码行 :menus="menus"
 <SideMenu
      v-else-if="isSideMenu()"
      mode="inline"
      :menus="menus" //数据绑定
      :theme="navTheme"
      :collapsed="collapsed"
      :collapsible="true"
      :tenant="tenant"
      :appName="appName"
      :to="to"
    >
 </SideMenu>
 
//JavaScript
 data () {
    return {
      production: config.production,
      collapsed: false,
      menus: []
    }
  },

 created () {
    this.menus = this.mainMenu.find(item => item.name === 'admin').children
    this.collapsed = !this.sidebarOpened
  },

由以上代码可知 接下来找传递给menu的数据mainMenu

下面展示一些 内联代码片。

// computed() 方法

// An highlighted block
computed: {
    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters
    }),

找vuex ，store里的addRouters

下面展示vuex 内联代码片。

// getters.js文件

// An highlighted block
 addRouters: state => {
    return state.permission.addRouters
  },

//module文件夹下的permission.js文件

// state
addRouters:[]
//mutations
 mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.addRouterMap = generateRouterMap(routers)
      state.routers = constantRouterMap.concat(routers)
    }

//actions里找SET_ROUTERS方法
actions: {
    GenerateAsyncRoutes ({ commit }, data) {
      return new Promise(resolve => {
        const { roles, isSuperTenant } = data
        const roleList = _.map(roles, value => value)
        if (isSuperTenant) {
          roleList.push('superTenant')
        }
        const accessedRouters = filterAsyncRouter(asyncRouterMap, roleList)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    },
    GenerateRoutes ({ commit }, data) {//
      return new Promise(resolve => {
        const accessedRouters = filterRouter(constantRouterMap)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })

全局搜索

下面展示一些 内联代码片。

// src 文件夹下的permission.js文件

// 找GenerateRoutes
const checkAuth = async (to, from, next) => {
  NProgress.start() // start progress bar
  // to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
  const token = getToken()
  await store.dispatch('GenerateRoutes')

 //找addRouters
      router.addRoutes(store.getters.addRouters)// 动态添加可访问路由表

观察main.js里 发现permission代码被注释

// An highlighted block
import bootstrap from './core/bootstrap'
import './core/lazy_use'
// import './permission' // permission control
import './utils/filter' // global filter
import './utils/base64'

打断点

下面展示一些 内联代码片。

//在getter.js文件打断点

// An highlighted block
  addRouters: state => state.permission.addRouters,
  //改成如下形式
    addRouters: state => {return state.permission.addRouters},

显示界面并没有断点出现，说明并没有走到这一步。

//在basicLayout.vue文件里打断点，即在报错的语句前

// An highlighted block
created () {
debugger
    // this.menus = this.mainMenu.find(item => item.name === 'admin').children
  
    this.collapsed = !this.sidebarOpened
  },

关注这2个地方

说明 mainMenu为空，该条校验语句导致新增路由没有成功
修改校验语句

// An highlighted block
 created () {
    // this.menus = this.mainMenu.find(item => item.name === 'admin').children //对路由进行校验
    this.menus = this.mainMenu
    this.collapsed = !this.sidebarOpened
  },

中间还看了一些 代码。

//由于在basicLayout.vue文件里 sideMenu 引入的语句是import SideMenu from '@/components/Menu/SideMenu'   去文件夹Menu里 找menu.js

// An highlighted block
var foo = 'bar';