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

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

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

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

// An highlighted blockcreated () {// this.menus = this.mainMenu.find(item => item.name === 'admin').children //对路由进行校验this.menus = this.mainMenuthis.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"<SideMenuv-else-if="isSideMenu()"mode="inline":menus="menus" //数据绑定:theme="navTheme":collapsed="collapsed":collapsible="true":tenant="tenant":appName="appName":to="to"></SideMenu>//JavaScriptdata () {return {production: config.production,collapsed: false,menus: []}},created () {this.menus = this.mainMenu.find(item => item.name === 'admin').childrenthis.collapsed = !this.sidebarOpened},

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

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

// computed() 方法

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

找vuex ，store里的addRouters

下面展示vuex 内联代码片。

// getters.js文件

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

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

// state
addRouters:[]
//mutationsmutations: {SET_ROUTERS: (state, routers) => {state.addRouters = routersstate.addRouterMap = generateRouterMap(routers)state.routers = constantRouterMap.concat(routers)}//actions里找SET_ROUTERS方法
actions: {GenerateAsyncRoutes ({ commit }, data) {return new Promise(resolve => {const { roles, isSuperTenant } = dataconst 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')//找addRoutersrouter.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 blockaddRouters: 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').childrenthis.collapsed = !this.sidebarOpened},

关注这2个地方

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

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

中间还看了一些 代码。

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

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

【vue】sideMenu 不显示 meta失效解决方法相关推荐

laytpl语法_浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式 laytpl 模板语法 {{ d.field }} 输出一个普通字段,不转义html 官方的说明但d.field 为空时会显示nu ...
hosts文件为空，仍然显示ERR_CONNECTION_RESET的解决方法（hosts.ics）
hosts文件为空,仍然显示ERR_CONNECTION_RESET的解决方法(hosts.ics) 最近在学习 Java 的时候,未免要使用到 idea 这一神器,但是不知道为什么,登录 idea ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...
utf-8编码的中文注释在 sourceinsight 显示乱码的解决方法---utf8 转gb2312插件
utf-8编码的中文注释在 sourceinsight 显示乱码的解决方法---utf8 转gb2312插件参考文章: (1)utf-8编码的中文注释在 sourceinsight 显示乱码的解 ...
vue 报错unknown custom element解决方法
vue 报错unknown custom element解决方法参考文章: (1)vue 报错unknown custom element解决方法 (2)https://www.cnblogs.co ...
mysql导出长数字到excel避免显示为科学记数法解决方法
mysql导出长数字到excel避免显示为科学记数法解决方法参考文章: (1)mysql导出长数字到excel避免显示为科学记数法解决方法 (2)http://www.cnblogs.com/z ...
linux shell 提示符消失终端提示符显示-bash-4.1# 解决方法
昨晚对服务器自带Python升级后,终端就不是以前root@主机+路径的显示方式了如下图: 查了很多资料,有人说是root目录下.bash_profile和.bashrc两个文件缺失,但我的这两个文 ...
win10很多软件显示模糊_win10安装软件出现乱码怎么办 win10新装软件显示乱码的解决方法_windows10_Windows系列_操作系统...
win10安装软件出现乱码怎么办?在新安装软件时,安装的过程中,安装界面出现了乱码,已至于无法正常安装,这种情况应该如何解决呢?下文中为大家带来了win10新装软件显示乱码的解决方法.感兴趣的朋友不妨 ...
加mp4文件后js失效_Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

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

【vue】sideMenu 不显示 meta失效解决方法相关推荐

最新文章

热门文章