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"),}],},]},
  • 今天就写到这里啦~
  • 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
  • 大家要天天开心哦

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

在这里插入图片描述

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

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

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

相关文章

select滑动分页请求数据

需求背景 Antd 的 select 组件支滑动分页获取后端数据 实现滑动加载数据 定义变量 const allLoadedRef useRef<boolean>(true); // 是否触底 const [current, setCurrent] useState<number>(1); // 当前页 const [list, setList] useState([]); // 列表定义…

搭建SQL 注入平台

sqli-labs是一款学习SQL 注入的开源平台&#xff0c;共有75种不同类型的注入&#xff0c;在本书 的同步网站下载完压缩包后并解压&#xff0c;复制源码然后将其粘贴到网站的目录中&#xff0c;进入 MySQL 管理中的phpMyAdmin, 打开http://127.0.0.1/phpMyAdmin/, 在数据库…

加解密算法

加解密算法 推荐链接前端加密&#xff0c;后端解密AES 推荐链接 链接目录 前端加密&#xff0c;后端解密 AES 下载CryptoJS库 //引入库里面的aes.js文件 <script type"text/javascript" src"__CDN__/assets/libs/CryptoJS/rollups/aes.js"></s…

day08-实战-今日指数

今日指数-day08 1. 个股最新分时行情数据 1.1 个股最新分时行情功能说明 1&#xff09;个股最新分时行情功能原型 2&#xff09;个股最新分时行情数据接口分析 功能描述&#xff1a;获取个股最新分时行情数据&#xff0c;主要包含&#xff1a;开盘价、前收盘价、最新价、最…

深入理解Promise:用法和面试问题解析

引言 在现代的异步JavaScript编程中&#xff0c;Promise是一个强大的工具&#xff0c;用于更优雅地处理异步操作。本文将深入探讨Promise的具体用法&#xff0c;并提供一些在面试中可能遇到的问题及其答案。 Promise的基本用法 Promise是一个代表异步操作最终完成或失败的对…

Redis降低内存占用(二)分片结构

一、分区方法&#xff1a; 分片&#xff0c;也称为分区。Redis提供了多种分区实现方案: 1、哈希分区 2、区间分区 3、一致性哈希分区 4、虚拟分区 5、LUA脚本实现分片 二、

AI相关技能

AI相关 掌握Python语言&#xff0c;了解基本的机器学习和深度学习神经网络算法&#xff0c;会使用PyTorch框架 进行深度学习模型训练&#xff0c;例如基于生成对抗网络的图像恢复处理 对视频&#xff0c; 文本、 Embedding 等的特征数据进行存储管理和分发的平台&#xff0c; …

fastApi笔记06-请求体-多个参数

多个请求体参数 from fastapi import FastAPI, Path, Query from pydantic import BaseModelapp FastAPI()class Item(BaseModel):name: strdescription: str | None Noneprice: floattax: float | None Noneclass User(BaseModel):username: strfull_name: str | None No…

量子加密机的工作原理是什么

量子加密机&#xff0c;作为现代加密技术的一大飞跃&#xff0c;正逐渐成为信息安全领域的研究热点。与传统的加密方法相比&#xff0c;量子加密技术以其独特的优势&#xff0c;为信息安全提供了更为坚实的保障。 量子加密的核心在于利用量子力学的特性&#xff0c;尤其是量子纠…

MySQL 多表操作

一.多表关系 1.一对一关系 一个学生只有一张身份证&#xff1b;一张身份证只能对应一个学生。 在任一表中添加外键&#xff0c;指向另一方主键&#xff0c;确保一对一关系。 一般一对一关系很少见&#xff0c;遇到一对一关系的表最好合并。 2.一对多/多对一关系 一个部门…

Mesh中的负载均衡策略介绍

通过负载均衡配置,将请求均匀分配到各个服务节点,避免请求集中在某一点上 Round Robin Weighted Round Robin Ring Hash Weighted Ring Hash​ Random Weighted Random Least Request Ring Hash MD5 Mesh 数据面基于 Envoy 深度定制,在负载均衡算法方面,使用的大部分是 En…

国产chat gpt推荐

下述网站响应非常快 会持续更新的! 付费&#xff1a; 小名言 免费&#xff1a; AIchatOS 百度的文心一言

【虚拟仿真】Unity3D中实现3DUI,并且实现Button、InputField、Toggle等事件绑定

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 最近在项目中需要用到3DUI的展示,之前一般会用TextMeshPro进行展示: 但是,后面又需要添加按钮、Toggle等…

船运物流管理系统|基于springboot船运物流管理系统设计与实现(源码+数据库+文档)

船运物流管理系统目录 目录 基于springboot船运物流管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员登录 2、货运单管理 3、公告管理 4、公告类型管理 5、新闻管理 6、新闻类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 …

【线性代数基础】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱 简述概要 关于线性代数的基础知识。 知识图谱 1.基本概念&#xff1a; 向量&#xff1a;向量是一个有方向的量&#xff0c;可以用一组数&#xff08;称为坐标&#xff09;来表示。在二维空间中&#x…

4、电源管理入门之子系统reset

目录 1. 简介 2. consumer-驱动软件 3. provider-reset驱动 3.1 整体介绍 3.2 reset复位API说明 之前的文章电源管理入门-1关机重启详解介绍了整机SoC的重启也可以说是reset,那么子系统的reset,例如某个驱动(网卡、USB等)或者某个子系统(NPU、ISP等运行在独立的M核或…

Windows安装PHP及在VScode中配置插件,使用PHP输出HelloWorld

安装PHP PHP官网下载地址(8.3版本)&#xff1a;PHP For Windows&#xff1a;二进制文件和源代码发布 点击下载.zip格式压缩包&#xff1a; 历史版本在Old archives中下载。推荐在Documentation download中下载官方文档&#xff0c;方便学习。 下载完成后在一个顺眼的地方解压压…

力扣刷题-202.快乐数

编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&#xff0c…

华为OD机试真题-二叉树计算-2024年OD统一考试(C卷)

题目描述:给出一个二叉树如下图所示: 6 / \ 7 9 \ / -2 6 请由该二叉树生成一个新的二叉树,它满足其树中的每个节点将包含原始树中的左子树和右子树的和。 2…

读取Excel工具类

需要的jar包 poi-3.13.jar poi-ooxml-3.13.jar poi-ooxml-schemas-3.13.jar poi-scratchpad-3.9.jar 工具类1 package com.test.poi;import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.…