vue-route的路由配置中父组件没有component怎么处理

概述

        为了方便开发和维护,所以web前端的路由配置路径和前端代码文件路径一般是一致的。但在实际开发中,项目可能会分很多级的菜单,由于很多菜单只有叶子菜单是真正的页面。而中间菜单项只是一个路由配置。

       为了正确路由到底层的功能页面,我们要创建很多个只包含<router-view />的页面。

{path: '/',name: 'all',redirect: '/home',},{path: '/home',name: 'home',component: () => import('@/views/menu/index.vue'),   //真正的菜单页面redirect: '/home/parent1',children:[{path: 'parent1',name: 'parent1',redirect: '/home/parent1/parent11',component: () => import('@/views/parent1/index.vue'),  //只<router-view />的页面children:[{path:"parent11",name:'parent11',redirect: '/home/parent1/parent111',component: () => import('@/views/parent1/parent11/index.vue'), //只<router-view />的页面children:[{path:"parent111",name:'parent111',component: () => import('@/views/parent1/parent11/parent111/index.vue')  //功能页面},{path:"parent112",name:'parent112',component: () => import('@/views/parent1/parent11/parent112/index.vue')  //功能的页面}]},{path:"parent2",name:'parent1',component: () => import('@/views/parent1/index.vue') //只<router-view />的页面}]}]}

所以我们创建了很多一样的页面:

<template>

        <router-view/>

</template>

 解决

            我们可以通过直接在conponent里直接配置<router-view>组件来解决这个问题。直接导入的方式如下:

component: { render: c => c("router-view")},

修改之后的路由配置如下:

{path: '/',name: 'all',redirect: '/home',},{path: '/home',name: 'home',component: () => import('@/views/menu/index.vue'),   //真正的菜单页面redirect: '/home/parent1',children:[{path: 'parent1',name: 'parent1',redirect: '/home/parent1/parent11',component: { render: c => c("router-view")},children:[{path:"parent11",name:'parent11',redirect: '/home/parent1/parent111',component: { render: c => c("router-view")},children:[{path:"parent111",name:'parent111',component: () => import('@/views/parent1/parent11/parent111/index.vue')  //功能页面},{path:"parent112",name:'parent112',component: () => import('@/views/parent1/parent11/parent112/index.vue')  //功能的页面}]},{path:"parent2",name:'parent1',component: () => import('@/views/parent1/index.vue') //只<router-view />的页面}]}]}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

指纹识别概念解析

目录 1. 指纹是物证之首 1.1 起源于中国 1.2 发展于欧洲 1.3 流行于全世界 2. 指纹图像 3. 指纹特征 4. 指纹注册 5. 指纹验证 6. 指纹辨识 1. 指纹是物证之首 指纹识别技术起源于中国、发展于欧洲、流行于全世界。自20世纪以来&#xff0c;指纹在侦破刑事案件、解决诉…

水泥超低排平台哪家好?

随着环保政策的加强和绿色发展理念的深入人心&#xff0c;水泥行业的超低排放改造已成为行业发展的新趋势。选择一个合适的水泥超低排平台对于确保改造效果和实现企业的可持续发展至关重要。朗观视觉小编将从多个角度出发&#xff0c;为您提供一份综合评估与选择攻略&#xff0…

Spring Boot 3.x 与 Spring Boot 2.x 的对比

Spring Boot 是 Java 开发领域的一个重要框架&#xff0c;它简化了基于 Spring 的应用开发。随着版本的不断更新&#xff0c;Spring Boot 提供了更多功能、更好的性能以及更简洁的配置。本文将详细对比 Spring Boot 3.x 和 Spring Boot 2.x&#xff0c;探讨它们之间的主要区别和…

[C语言]自定义类型详解:结构体、联合体、枚举

目录 &#x1f680;结构体 &#x1f525;结构体类型的声明 &#x1f525;结构的自引用 &#x1f525;结构体变量的定义和初始化 &#x1f525;结构体内存对齐 &#x1f525;结构体传参 &#x1f525;结构体实现位段&#xff08;位段的填充&可移植性&#xff09; &a…

安装 Ubuntu桌面版,详细步骤(附引导 U盘制作工具)

下载镜像 安装Ubuntu首先要下载镜像包&#xff0c;访问下面网址下载镜像包 https://releases.ubuntu.com/ 选择你要安装的Ubuntu版本 将 .iso 文件保存到所需位置&#xff0c;下面会使用此文件创建可引导 U盘。 制作 Ubuntu 引导 U 盘 首先要找到一个大于4G的U盘&#xff…

猫头虎 解析:为什么AIGC在国内适合做TOB,在国外适合做TOC?

猫头虎 解析&#xff1a;为什么AIGC在国内适合做TOB&#xff0c;在国外适合做TOC&#xff1f; 博主 猫头虎 的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面…

ps进程查看命令详解

1、PS 命令是什么 查看它的man手册可以看到&#xff0c;ps命令能够给出当前系统中进程的快照。它能捕获系统在某一事件的进程状态。如果你想不断更新查看的这个状态&#xff0c;可以使用top命令。 2、ps命令支持三种使用的语法格式 UNIX 风格&#xff0c;选项可以组合在一起…

鸿蒙ArkUI-X平台差异化:【运行态差异化(@ohos.deviceInfo)】

平台差异化 简介 跨平台使用场景是一套ArkTS代码运行在多个终端设备上&#xff0c;如Android、iOS、OpenHarmony&#xff08;含基于OpenHarmony发行的商业版&#xff0c;如HarmonyOS Next&#xff09;。当不同平台业务逻辑不同&#xff0c;或使用了不支持跨平台的API&#xf…

c++中静态函数

在Qt中&#xff0c;可以通过在类中定义静态方法来添加静态方法。静态方法是类的一部分&#xff0c;但不需要实例化类对象就可以直接调用。 下面是一个示例&#xff0c;演示了如何在类中添加静态方法&#xff1a; cpp class MyClass { public: static void myStaticMethod…

Postman快捷功能-批量断言与快速查询替换

大家好&#xff0c;在我们日常的接口测试工作中&#xff0c;经常需要对接口返回的数据进行断言&#xff0c;以确保接口的正确性。当接口数量较多时&#xff0c;逐个编写断言语句会变得非常繁琐。此外&#xff0c;在接口测试过程中&#xff0c;我们还可能需要频繁地查找和替换某…

Python自动化工具(桌面自动化、Web自动化、游戏辅助)

工具介绍 连点工具是一款可以模拟键鼠后台操作的连点器工具。支持鼠标连点、键鼠脚本录制&#xff0c;支持辅助您实现办公自动化以及辅助游戏操作。功能简洁易用&#xff0c;非常方便操作。连点工具让您在在玩游戏、网购抢购的时候全自动点击鼠标&#xff01;主要功能有&#…

MySQL数据库的数据文件保存在哪?MySQL数据存在哪里

在安装好MySQL数据库使用一段时间后&#xff0c;会产生许多的数据库和数据。那这些数据库的数据文件存放在本地文件夹的什么位置呢 一、默认位置 一般来说MySQL数据库的数据文件都是存放在data文件夹之中&#xff0c;但是根据使用的存储引擎不同&#xff0c;产生的一些文件也…

牛客前端面试高频八股总结(2)(附文档)

1.fetch请求方式 fetch是什么&#xff1f; fetch是一种http 数据请求的方式&#xff0c;是xml的一种替代方式。 怎么请求&#xff1f; fetch方法返回一个promise解析response显示状态&#xff08;成功与否&#xff09;的方法。 优点&#xff1a; 使用Promise&#xff0c;支持链…

24李林跌落神坛,880还刷吗?还是换1000、900、660?

“李林今年跌落神坛了&#xff01;” “全是固定题型没新题&#xff0c;结果今年考的全是新题。” 880是“老真题的神”&#xff0c; 遇到24年&#xff0c;冷门考点多&#xff0c;计算量又大&#xff0c;就不灵了。 但“老真题”&#xff0c;还是得刷。就像往年真题是要刷的…

(十一)统计学基础练习题五(50道选择题)

本文整理了统计学基础知识相关的练习题&#xff0c;共50道&#xff0c;适用于想巩固统计学基础或备考的同学。来源&#xff1a;如荷学数据科学题库&#xff08;技术专项-统计学二&#xff09;。序号之前的题请看往期文章。 201&#xff09; 202&#xff09; 203&#xff09; 2…

得帆信息PMO总监李健达受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 上海得帆信息技术有限公司aPaaS业务线副总裁、PMO总监李健达先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“AI时代的PMO工作法”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#x…

39. 组合总和 - 力扣(LeetCode)

基础知识要求&#xff1a; Java&#xff1a; 方法、集合、泛型、Arrays工具类、for循环、if判断 Python&#xff1a; 方法、列表、for循环、if判断 题目&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使…

Spring框架学习笔记(五):JdbcTemplate 和 声明式事务

基本介绍&#xff1a;通过 Spring 框架可以配置数据源&#xff0c;从而完成对数据表的操作。JdbcTemplate 是 Spring 提供的访问数据库的技术。将 JDBC 的常用操作封装为模板方法 1 JdbcTemplate 使用前需进行如下配置 1.1 在maven项目的pom文件加入以下依赖 <dependencies…

Java面试进阶指南:高级知识点问答精粹(二)

Java 面试问题及答案 1. 什么是Java内存模型&#xff08;JMM&#xff09;&#xff1f;它在并发编程中扮演什么角色&#xff1f; 答案&#xff1a; Java内存模型&#xff08;JMM&#xff09;是一个抽象的模型&#xff0c;它定义了Java程序中各种变量&#xff08;线程共享变量&…

labelme的使用

创建虚拟环境 听说是要用这个3.6版本的python环境 conda create --namelabelme python3.6激活虚拟环境 activate labelme下载labelme pip install labelme #安装labelme组件启动labelme 在你打开文件的时候推荐还是自己先建立一个label.txt 把自己要分的类别放进去 label.…