vue动态路由,三级及以上路由,地址跳转,但是页面不显示

vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,原因是共用了一个<router-view></router-view>

import Layout from '@/layout'
import Vue from 'vue'
import Router from 'vue-router'
import db from '@/utils/localstorage'
import {
  Shortcuts
} from 'tinymce'
Vue.use(Router)
const usermenuList = db.get("usermenuList");
let list = [];
console.log(usermenuList);
if (usermenuList.length != undefined) {
  usermenuList.forEach(function(item, index) {
    if (item.parentId == 0) { //一级
      item.component = Layout;
      if (item.children) {//二级
        item.children.forEach(function(item1, index1) {
          if (item1.children) { //三级
            item1.component = {render(c) { return c('router-view')}}
            item1.children.forEach(function(item2, index2) {
              if (item2.children) { //四级
                item2.component = {render(c) { return c('router-view')}}
                item2.children.forEach(function(item3, index3) {
                  if (item3.url) {
                    item3.component = (resolve) => require([`@/views${item3.url}.vue`], resolve);
                  }

                });
              } else {
                if (item2.url) {
                  item2.component = (resolve) => require([`@/views${item2.url}.vue`], resolve);
                }
              }
            });
          } else {
            if (item1.url) {
              item1.component = (resolve) => require([`@/views${item1.url}.vue`], resolve);
            }
          }
        });
      }
    }
    list.push(item);
  });
}


export default {
  section: [
  
    ...list
  ],
}

这种循环希望大家使用递归

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/275318.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

工具系列:TensorFlow决策森林_(8)组合决策森林和神经网络模型

文章目录 介绍安装 TensorFlow Decision Forests导入库数据集模型结构模型训练评估决策森林下一步是什么&#xff1f; 介绍 欢迎来到TensorFlow Decision Forests&#xff08;TF-DF&#xff09;的模型组合教程。本教程将向您展示如何使用通用的预处理层和Keras函数式API将多个…

linux 网络工具(一)

linux 网络工具 1. nmcli命令1.1 介绍1.2 networking 网络控制1.3 connection 连接管理1.4 device 设备管理1.5 nmcli 返回状态码 2. ifcfg命令家族2.1 ifconfig2.2 route2.3 netstat 3. 静态路由CentosUbuntu - netplanUbuntu - network-manager 1. nmcli命令 1.1 介绍 RHEL…

使用机器学习进行语法错误检测/纠正

francescofranco_39234 一、说明 一般的学习&#xff0c;特别是深度学习&#xff0c;促进了自然语言处理。各种模型使人们能够执行机器翻译、文本摘要和情感分析——仅举几个用例。今天&#xff0c;我们将研究另一个流行的用途&#xff1a;我们将使用Gramformer构建一个用于机器…

安卓全球定位系统RTK测量仪 手持GPS北斗定位仪可用于国土电力

RTK&#xff0c;英文全名叫做Real-time kinematic&#xff0c;也就是实时动态。这是一个简称&#xff0c;全称是RTK&#xff08;Real-time kinematic&#xff0c;实时动态&#xff09;载波相位差分技术。 RTK定位是一种高精度的全球卫星导航技术&#xff0c;是实时运用技术&…

springcloud之通过openfeign优化服务调用方式

写在前面 源码 。 在前面的文章中我们实际上已经完成了优惠券模块微服务化的改造&#xff0c;但是其中还是有比较多可以优化和增强的地方&#xff0c;本文就先来对服务间的通信方式进行优化&#xff0c;具体就是使用openfeign来替换调原来的webclient。下面我们就开始吧&#…

低代码平台在金融银行中的应用场景

随着数字化转型的推进&#xff0c;商业银行越来越重视技术在业务发展中的作用。在这个背景下&#xff0c;白码低代码平台作为一种新型的开发方式&#xff0c;正逐渐受到广大商业银行的关注和应用。白码低代码平台能够快速构建各类应用程序&#xff0c;提高开发效率&#xff0c;…

网络攻防中应该掌握的进阶工具udp2raw,通过raw socket给UDP包加上TCP或ICMP header,进而绕过UDP屏蔽或QoS

网络攻防中应该掌握的进阶工具udp2raw,通过raw socket给UDP包加上TCP或ICMP header,进而绕过UDP屏蔽或QoS。 udp2raw tunnel,通过raw socket给UDP包加上TCP或ICMP header,进而绕过UDP屏蔽或QoS,或在UDP不稳定的环境下提升稳定性。可以有效防止在使用kcptun或者finalspeed的…

TiDB 7.5 LTS 发版丨提升规模化场景下关键应用的稳定性和成本的灵活性

互联网时代&#xff0c;数据的迅猛增长给数据库带来了可扩展性的挑战&#xff0c;Gen AI 带来的数据暴增更加剧了这种挑战。传统的数据分片已经不能承载新时代数据暴增的需求&#xff0c;更简单且具有前瞻性的方法则是采用原生分布式数据库来解决扩展性问题。在这种规模化场景的…

MYSQL一一外键约束

概念&#xff1a;外键用来让两张表的数据之间建立联系&#xff0c;从而保证数据的一致性和完整性 建立外键&#xff1a; ①这是在建立表的时候建立外键的方法 ②这是在建立完表之后建立外键的方法&#xff1a; 删除外键&#xff1a; 现在有一张员工表&#xff08;emp&#xf…

Linux基本指令(二)

目录 &#x1f4d5;前言 &#x1f4d5;echo 输出重定向&#xff08;>&#xff09; 追加重定向(>>) 输入重定向&#xff08;<&#xff09; &#x1f4d5;more &#x1f4d5;less &#x1f4d5;head &#x1f4d5;tail 查看大文本的中间部分 &#x1f4d5…

Java 8 中的 Stream 轻松遍历树形结构!

可能平常会遇到一些需求&#xff0c;比如构建菜单&#xff0c;构建树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理&#xff0c;我们一起来看看…

深入ArkUI:深入实战组件text和text input

文章目录 Text组件介绍Text组件的属性方法Text:文本显示组件4.3TextInput组件实战案例:图片宽度控制页面本文总结要点回顾在今天的课程中,我们将深入学习ArkUI提供的基础组件,着重探讨text和text input两个组件。 Text组件介绍 Text组件是一个用于显示文本的组件,其主要作…

自动化运维平台Spug本地部署结合内网穿透实现远程访问

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件…

【HTML】使用canvas添加水印

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>添加水印</title><style>…

WebRTC原理与web端实战开发

什么是WebRTC webRtc(web real-time Communication) &#xff0c;旨在建立一个浏览器间实时通信的平台 谷歌开源跨平台&#xff08;android&#xff0c;IOS&#xff0c;windows&#xff0c;Linux&#xff09;实时传输&#xff08;提供强大的音视频引擎&#xff09; RTC涉及的…

SpringCloud(H版alibaba)框架开发教程---附源码 一

源码地址&#xff1a;https://gitee.com/jackXUYY/springboot-example 创建订单服务&#xff0c;支付服务&#xff0c;公共api服务&#xff08;共用的实体&#xff09;&#xff0c;eureka服务 1.cloud-consumer-order80 2.cloud-provider-payment8001 3.cloud-api-commons 4.…

Vue框架引入Axios

首先已经创建好了 Vue 框架&#xff0c;安装好了 node.js。 没有完成的可按照此博客搭建&#xff1a;搭建Vue项目 之后打开终端&#xff0c;使用命令。 1、命令安装 axios 和 vue-axios npm install axios --save npm install vue-axios --save2、package.json 查看版本 在 p…

Flink1.17实战教程(第五篇:状态管理)

系列文章目录 Flink1.17实战教程&#xff08;第一篇&#xff1a;概念、部署、架构&#xff09; Flink1.17实战教程&#xff08;第二篇&#xff1a;DataStream API&#xff09; Flink1.17实战教程&#xff08;第三篇&#xff1a;时间和窗口&#xff09; Flink1.17实战教程&…

新建虚拟环境并与Jupyter内核连接

第一步:在cmd里新建虚拟环境,shap38是新建的虚拟环境的名字 ,python=3.x conda create -n shap38 python=3.8第二步,安装ipykernel,打开anconda powershell prompt: 虚拟环境的文件夹位置,我的如图所示: 进入文件夹并复制地址: 输入复制的文件夹地址更改文件夹:…

跨境电商获客脚本必备功能有哪些?

随着全球化的加速和电子商务的兴起&#xff0c;跨境电商已经成为了企业拓展市场、提高收益的重要途径。 而在跨境电商运营中&#xff0c;获客脚本的作用不可忽视&#xff0c;本文将为您揭示跨境电商获客脚本必备的五大功能&#xff0c;帮助您在激烈的市场竞争中抢占先机。 一…