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

news2024/10/7 17:32:14

问题描述

  • 情况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.coloradmin.cn/o/1465638.html

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

相关文章

【MySQL系列 04】深入浅出索引

一、索引介绍 提到数据库索引,相信大家都不陌生,在日常工作中会经常接触到。比如某一个 SQL 查询比较慢,分析完原因之后,你可能就会说“给某个字段加个索引吧”之类的解决方案。 但到底什么是索引,索引又是如何工作的…

Vue | (四)使用Vue脚手架(上) | 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 📚初始化脚手架🐇创建初体验🐇分析脚手架结构🐇关于render🐇查看默认配置 📚ref与props🐇ref属性🐇props配置项 📚混入📚插件📚scoped样…

抖音爬虫批量视频提取功能介绍|抖音评论提取工具

抖音爬虫是指通过编程技术从抖音平台上获取视频数据的程序。在进行抖音爬虫时,需要注意遵守相关法律法规和平台规定,以确保数据的合法获取和使用。 一般来说,抖音爬虫可以实现以下功能之一:批量视频提取。这个功能可以用于自动化地…

Lua速成(2)

一、流程控制 Lua 编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码,在条件为 false 时执行其他指定代码。 控制结构的条件表达式结果可以是任何值,Lua认为false和nil为假,true和非nil为真。 …

模拟、排序(归并排序)算法

模拟、排序算法 一、模拟例题1、错误票据题目信息思路题解 2、回文日期题目信息思路方法一:暴力做法方法二:优化解法 题解方法一:暴力求解方法二:优化解法 二、排序例题1、归并排序题目信息思路题解 一、模拟 例题 1、错误票据 …

AI副业项目分享

在上一篇文章《这才是大学生该做的副业,别再痴迷于游戏了!》中,我分享了一些副业的想法,接着有不少同学问我:具体如何做?这是真把我给整蒙了,这里分享下我可以提供的产品和服务吧,并…

实用区块链应用:去中心化投票系统的部署与实施

一、需求分析背景 随着技术的发展,传统的投票系统面临着越来越多的挑战,如中心化控制、透明度不足和易受攻击等问题。为了解决这些问题,我们可以利用区块链技术去中心化、透明性和安全性来构建一个去中心化投票系统。这样的系统能够确保投票过…

【某机构vip教程】python(6):python读取ini的配置文件

python读取ini的配置文件 configparser模块简介: configparser模块是用来解析ini配置文件的解析器。 ini配置文件的结构如x下图 ini文件结构需要注意以下几点: 键值对可用或者:进行分隔 section的名字是区分大小写的,而key的名字是不区分大小写的 …

Redis(十五)Bitmap、Hyperloglog、GEO案例、布隆过滤器

文章目录 面试题常见统计类型聚合统计排序统计二值统计基数统计 Hyperloglog专有名词UV(Unique Visitor)独立访客PV(Page View)页面浏览量DAU(Daily Active User)日活跃用户量MAU(Monthly Activ…

【2024软件测试面试必会技能】Appium自动化(6):原生app元素定位方法

元素定位方法介绍及应用: Appium方法定位原生app元素: 通过appium inspector工具,可以获取元素的相关信息;在appium中提供了一系列的元素定位API,通过在这些API中输入指定的元素信息,就能完成元素定位,定…

学习Redis基础篇

1.初识Redis 1.认识NoSQL 2.认识Redis 3.连接redis命令 4.数据结构的介绍 5.通用命令 2.数据类型 1.String类型 常见命令:例子:set key value

【Linux 内核源码分析】内存管理——伙伴分配器

在Linux操作系统中,内存分配通常由内核中的内存管理模块完成。以下是三个主要的内存分配器: 伙伴系统 (Buddy System):这是内核中最基本的分配器,用于分配物理内存。伙伴系统将内存块组织成不同大小的伙伴,以便有效地分…

电脑c盘太满了怎么办?5个必备的好方法~

随着我们在电脑上存储和安装越来越多的文件和程序,C盘的空间可能会迅速减少,甚至变得过于拥挤。当C盘空间不足时,会影响电脑的运行速度和性能,甚至导致系统崩溃。本文将介绍一些解决C盘空间不足问题的方法,帮助你更好地…

git中将所有修改的文件上传到暂存区

案例: 我将本地的多个文件进行了修改,导致文件发生了变化。使用git status命令,查看文件的状态,发现有多个文件是modified,即被修改了。 本地文件发生了变化,需要将modified的文件添加到暂存区&#xff0c…

【Git工具实战】实用真实 Git 开发工作流程

前言 最近工作中发现,很多开发人员连最基本的Git怎么使用都不知道,比如什么时候切分支,什么时候合并代码,代码遇到冲突怎么办,经常出现掉代码,代码合并后丢失的情况。以下为个人总结的常规Git开发工作流程…

Python实战:读取MATLAB文件数据(.mat文件)

Python实战:读取MATLAB文件数据(.mat文件) 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 👈 希望得到您的订阅…

七分钟交友匿名聊天室源码

应用介绍 本文来自:七分钟交友匿名聊天室源码 - 源码1688 简介: 多人在线聊天交友工具,无需注册即可畅所欲言!你也可以放心讲述自己的故事,说出自己的秘密,因为谁也不知道对方是谁。 运行说明&#xff…

docker镜像和容器的关系

背景 镜像和容器都是docker中非常重要的概念,镜像是静态的,而容器是动态的,两者的关系就类似类和实例的关系,本文就来分析下两者的关联 镜像和容器 我们知道镜像是存放在仓库中的静态的文件,而容器是运行中的进程&a…

厌倦了混乱的代码?掌握编写干净代码库的艺术

对于入门的开发人员来说,虽然克服了最初的障碍,学会了编程,找到了理想的工作。但其编程旅程并没有就此结束。他们面临真正的挑战:如何编写更好的代码。这不仅仅是为了完善功能,还要编写出经得起时间考验的优雅、可维护…

HTML5 Canvas 限定文本区域大小,文字自动换行,自动缩放

<!DOCTYPE html> <html> <body><h1>HTML5 Canvas 限定文本展示范围、自动计算缩放字体大小</h1><div id"tips">0</div> <div id"content">良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐…