vue-router 三级路由,路由跳转页面异常白屏或404,或刷新三级路由页面后一级和二级路由菜单丢失

问题描述

  • 情况1. vue-router 定义三级路由,路由跳转了,页面404或者白屏
  • 情况2. 点击菜单三级路由后,刷新页面后一级和二级路由菜单丢失
解决方案:

某些时候是因为二级和三级的路由共用router-view,可以使用router-view 和 redirect 解决问题

   const routes = {
    path: '/xiaojin', // 一级路由
    name: 'xiaojin',
    redirect: '/xiaojin/abc',
    component: Layout,
    meta: {
      title: '一级路由',
    },
    children: [
    {
      path: "/xiaojin/abc",
      name: "abc",
      redirect: "/xiaojin/abc/aa",
      component: { render(c) { return c("router-view"); },
      },
      meta: {
        title: "二级路由",
      },
      children: [
        {
          path: "/xiaojin/abc/aa",
          name: "aa",
          meta: {
            title: "三级菜单",
          },
          component: () => import("../views/pages/xiaojin/aa/index.vue"),
        },
        {
          path: "/xiaojin/abc/lalala",
          name: "lalala",
          meta: {
            title: "lalala",
          },
          component: () => import("../views/pages/xiaojin/lalala/index.vue"),
        }
      ],
    },
  ]
  },
  • 今天就写到这里啦~
  • 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
  • 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境,合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

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

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

相关文章

基于ssm框架的高校班级管理系统设计与实现

为解决当前高校班级管理中管理方式落后、手段落后及效率低下等问题而以当前主流的互联网技术设计一款高校班级管理系统。该系统采用B/S模式的设计思路而将前端(JSP技术)和后端(SSM框架MySQL数据库)整合于一体并通过Java语言代码编…

Android java中包的使用

一.包的使用 为了更好的实现项目中类的管理,提供包的概念。 package语句作为Java源文件的第一条语句,指明该文件中定义的类所在的包。(若缺省该语句,则指定为无名包)。 它的格式为:package 顶层包名.子包名 ; 二.java中主要的包…

ES坑-创建索引使用_下划线-黑马旅游搜不到

学ES的时候,星级过滤无效 找不到数据。 需要 但是我们在创建的时候使用的是keyword 通过研究发现,我们导入数据的时候应该默认的为starName 我get库时候发现有2个字段 所以通过star_name搜索因为都是空数据搜不到,而starName类型为text所以…

LeetCode 0235.二叉搜索树的最近公共祖先:用搜索树性质(不遍历全部节点)

【LetMeFly】235.二叉搜索树的最近公共祖先:用搜索树性质(不遍历全部节点) 力扣题目链接:https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/ 给定一个二叉搜索树, 找到该树中两个指定节点的最近公…

单机取证-信息安全管理与评估-2022年国赛真题-环境+wp

🍬 博主介绍 博主介绍:大家好,我是 Mikey ,很高兴认识大家~ 主攻:【应急响应】 【python】 【数字取证】【单机取证】【流量分析】【MISC】 🎉点赞➕评论➕收藏 == 养成习惯(一键三连)😋 🎉欢迎关注💗一起学习👍一起讨论⭐️一起进步 作者水平有限,欢迎各…

10-pytorch-完整模型训练

b站小土堆pytorch教程学习笔记 一、从零开始构建自己的神经网络 1.模型构建 #准备数据集 import torch import torchvision from torch.utils.tensorboard import SummaryWriterfrom model import * from torch.utils.data import DataLoadertrain_datatorchvision.datasets.…

WPF 启动项目 Grid、StackPanel 布局

WPF 启动项目 <!--x:Class"WPF_Study.App" 对应类&#xff1a;WPF_Study.App--> <!--xmlns:local"clr-namespace:WPF_Study" 命名空间&#xff1a;WPF_Study--> <Application x:Class"WPF_Study.App"xmlns"http://schema…

网络原理TCP之“三次握手“

TCP内核中的建立连接 众所周知,TCP是有连接的. 当我们在客户端敲出socket new Socket(serverIp,severPort)时,就在系统内核就在建立连接 真正建立连接是在系统内核中建立的,我们程序员只是调用相关的api. 在此处,我们把TCP的建立连接称为三次握手. 系统在内核建立连接时如上…

【Linux进程】进程状态---进程僵尸与孤儿

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.进程排队2.进程状态…

OSCP靶场--Nickel

OSCP靶场–Nickel 考点(1.POST方法请求信息 2.ftp&#xff0c;ssh密码复用 3.pdf文件密码爆破) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.237.99 -sV -sC -p- --min-rate 5000 Starting Nmap 7.92 ( https://nmap.org ) at 2024-02-22 04:06 EST Nm…

机器学习基础(五)监督与非监督学习的结合

导语&#xff1a;上一节我们详细探索非监督学习的进阶应用&#xff0c;详情可见&#xff1a; 机器学习基础&#xff08;四&#xff09;非监督学习的进阶探索-CSDN博客文章浏览阅读613次&#xff0c;点赞15次&#xff0c;收藏13次。非监督学习像一位探险家&#xff0c;挖掘未标…

前后端分离Vue+ElementUI+nodejs蛋糕甜品商城购物网站95m4l

本文主要介绍了一种基于windows平台实现的蛋糕购物商城网站。该系统为用户找到蛋糕购物商城网站提供了更安全、更高效、更便捷的途径。本系统有二个角色&#xff1a;管理员和用户&#xff0c;要求具备以下功能&#xff1a; &#xff08;1&#xff09;用户可以修改个人信息&…

ARMv8-AArch64 的异常处理模型详解之异常向量表vector tables

目录 一&#xff0c;AArch64 异常向量表 二&#xff0c;栈指针以及SP寄存器的选择 三&#xff0c;从异常返回 一&#xff0c;AArch64 异常向量表 异常向量表&#xff08;vector tables&#xff09;是一组存放于普通内存&#xff08;normal memory&#xff09;空间的&#xf…

视频号视频下载(如何把视频号中的视频下载下来)

在如今的信息时代&#xff0c;热点创作者和科技创作者们的素材库越来越丰富&#xff0c;视频号作为一种新兴的媒体形式&#xff0c;其中蕴含的优质内容更是不可或缺。但是&#xff0c;如何将心仪的视频号视频下载下来&#xff0c;进行二次创作并在其他平台发布呢&#xff1f;今…

Vue+SpringBoot打造开放实验室管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实验管理模块2.4 实验设备模块2.5 实验订单模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示五、样例代码5.1 查询实验室设备5.2 实验放号5.3 实验预定 六、免责说明 一、摘…

Kafka集群详解

Kafka集群的目标 1、高并发 2、高可用&#xff08;防数据丢失&#xff09; 3、动态伸缩 Kafka集群规模如何预估 吞吐量&#xff1a; 集群可以提高处理请求的能力。单个Broker的性能不足&#xff0c;可以通过扩展broker来解决。 磁盘空间&#xff1a; 比如&#xff0c;如…

Ansible user 模块 该模块主要是用来管理用户账号

目录 参数语法验证创建用户删除用户验证 删除用户 参数 comment  # 用户的描述信息 createhome  # 是否创建家目录 force  # 在使用stateabsent时, 行为与userdel –force一致. group  # 指定基本组 groups  # 指定附加组&#xff0c;如果指定为(groups)表示删除所有…

Nest.js权限管理系统开发(二)连接MySQL、Redis

安装MySQL及相关依赖 下载dmg文件安装 前往MySQL :: Download MySQL Community Server下载最新版本的MySQL。 打开系统设置&#xff0c;拉到最下方可以看到MySQL&#xff0c;打开看到两个绿点表示安装成功&#xff0c;也可以在这里修改MySQL密码。 配置环境变量 打开终端配…

Windows中的Git Bash运行conda命令:未找到命令的错误(已解决)

在windows中的Gitbash中 打开激活conda环境&#xff0c;并运行&#xff08;前提是你先安装好git&#xff08;自己去官网下载&#xff09;&#xff09;。 要能够在Gitbash上运行Conda&#xff0c; 临时配置 如果你只是临时用一下&#xff0c;就是临时爽一把&#xff0c;那就按…

独立站建站全攻略:从0到1打造专属在线商业平台

独立站建站全攻略&#xff1a;从0到1打造专属在线商业平台 随着互联网的普及和发展&#xff0c;越来越多的企业和个人开始认识到拥有一个独立站的重要性。独立站不仅可以提升品牌形象&#xff0c;还能为企业带来更多的流量和潜在客户。本文将为大家详细介绍独立站建站的全过程…