vue3项目打包后多级嵌套路由子路由刷新后空白问题

news2024/12/26 0:05:49
问题描述

Vue3项目打包发布后,进入个人中心界面,刷新后页面出现空白。前提是已经配置了重定向到index.html。在访问/personal/profile这种路由的时候刷新后页面会出现空白。在App.vue中有一个routerview ,personal界面中有一个routerview .界面如图所示
在这里插入图片描述
router.js关键部分,删除了其他菜单路由

// 创建路由规则
const routes = [
  {
    path: "/",
    component: Main,
    children: [
      {
        path: "",
        redirect: "/home", // 默认重定向到 /home
      },
      {
        path: "/home",
        name: "Home",
        component: Home,
      },
      {
        path: "/personal",
        name: "Personal",
        component: PersonalCenter,
        meta: { requiresAuth: true }, 
        children: [
          {
            path: "devicemanage",
            name: "DeviceManage",
            component: DeviceManage,
            meta: { requiresAuth: true }, 
          },
          {
            path: "profile",
            name: "Profile",
            component: Profile,
            meta: { requiresAuth: true },
          },
          {
            path: "securitycenter",
            name: "SecurityCenter",
            component: SecurityCenter,
            meta: { requiresAuth: true },
          },
        ],
      },
    ],
  },
];

解决办法

vite.config.js中将基础路径设置为绝对路径。之前是./改为/就可以了

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true
  },
  base: "/", // 设置基础路径为绝对路径
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

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

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

相关文章

【Python基础】Python错误和异常处理(详细实例)

本文收录于 《Python编程入门》专栏,从零基础开始,分享一些Python编程基础知识,欢迎关注,谢谢! 文章目录 一、前言二、Python中的错误类型三、Python异常处理机制3.1 try-except语句3.2 try-except-else语句3.3 try-fi…

GD - GD32350R_EVAL - PWM实验和验证2 - EmbeddedBuilder - 无源蜂鸣器

文章目录 GD - GD32350R_EVAL - PWM实验和验证2 - EmbeddedBuilder - 无源蜂鸣器概述笔记先前失败的实验电路图本次成功的图 - 无源蜂鸣器电路模块接入实验模块实验软件工程主循环实现PWM频率改变蜂鸣器声音大小实验结果和官方给的蜂鸣器频率响应曲线基本一样看看实际波形END G…

智慧交通基于yolov8的行人车辆检测计数系统python源码+onnx模型+精美GUI界面

【算法介绍】 智慧交通中,基于YOLOv8的行人车辆检测计数系统是一项高效、准确的技术解决方案。该系统利用YOLOv8这一先进的目标检测算法,结合深度学习技术,能够实时检测并准确计数道路上的行人和车辆。YOLOv8在保证检测速度的同时&#xff0…

视图(mysql)

一、什么是视图 视图是⼀个虚拟的表,它是基于⼀个或多个基本表或其他视图的查询结果集。视图本⾝不存储数 据,⽽是通过执⾏查询来动态⽣成数据。⽤⼾可以像操作普通表⼀样使⽤视图进⾏查询、更新和管 理。视图本⾝并不占⽤物理存储空间,它仅…

linux命令用于删除文本文件中的重复行的命令uniq详解

目录 一、概述 二、基本用法 1、uniq 命令的基本语法 2、常用选项 3、获取帮助 三、主要功能 1. 识别并删除相邻重复行 2. 保留重复行的第一个实例 3. 统计重复次数 4. 忽略指定列的比较 四、示例 1. 删除相邻重复行 2. 显示每一行及其重复次数 3. 只显示重复行 4. …

【Hot100】LeetCode—136. 只出现一次的数字

目录 1- 思路题目识别技巧 2- 实现⭐136. 只出现一次的数字——题解思路 原题链接:136. 只出现一次的数字 1- 思路 题目识别 识别1 :给定一个数组,里面元素均出现两次,只有一个数只出现一次。 技巧 一个数和 0 的异或是这个数…

前端网页代码编辑器 Monaco Editor

前端网页代码编辑器 Monaco Editor Monaco Editor Monaco Editor 是由 Microsoft 开发的一款基于 Web 技术的开源代码编辑器,它是 Visual Studio Code 编辑器的核心。Monaco Editor 可以嵌入到网页中,提供类似于 Visual Studio Code 的编辑体验。 官方…

华为SMU02B1管理模块WEB登录与账户密码信息

1、将电脑的IP地址与SMU02B1的IP地址配置在同一个网段中。例如,如果监控的IP地址为192.168.0.11,子网掩码为255.255.255.0,默认网关为192.168.0.1,则电脑的IP地址设置成192.168.0.12,子网掩码设置成255.255.255.0&…

基于微信小程序的垃圾分类(lw+演示+源码+运行)

摘 要 随着生态文明体制改革的不断推进,可持续发展的环保理念逐渐成为社会共识,而在推行环保措施的过程中却困难重重.针对生活废弃物肆意无序投放的问题,尽管目前各大城市相继推出垃圾分类强制性执行的政策法规,但因市民欠缺对垃圾种类的正确认识而导致垃圾分类的施行难度和成…

【Docker系列】环境准备-VirtualBox虚拟机安装

前言 最近一段时间研究了一下Docker容器方面的技术,发现容器技术还是蛮好玩的。但是自己手头上没啥Linux操作系统机器,于是就想到利用一些虚拟机软件工具,在自己的Windows操作系统上安装几个Linux操作系统环境。我这里给大家介绍的是一款常用…

【代码随想录训练营第42期 Day58打卡 - 图论Part8 - 拓扑排序

目录 一、拓扑排序介绍 定义 特点 实现方法(2种) 应用 二、题目与题解 题目:卡码网 117. 软件构建 题目链接 题解:拓扑排序 - Kahn算法(BFS) 三、小结 一、拓扑排序介绍 对于拓扑排序&#xff0c…

【传纸条 / NOIP / Google】

题目 代码&#xff08;还是我的好理解&#xff0c;(●◡●)&#xff09; #include <bits/stdc.h> using namespace std; const int N 55; int w[N][N]; int f[2*N][N][N]; int main() {int m, n;cin >> m >> n;for(int i 1; i < m; i){for(int j 1; j…

ASPCMS靶场漏洞复现

浏览器访问环境 1.进入后台管理 aspcms默认的后台登录地址为/admin_aspcms/index.asp 用户名&#xff1a;admin 密码&#xff1a;123456 2.点击扩展功能里面的幻灯片设置 3.在保存的时候抓包 抓包修改slideTextStatus参数为一句话木马 1%25><%25Eval(Request (chr(65…

【CSS】选择器(基本选择器、复合选择器、属性匹配选择器、结构伪类选择器、伪元素选择器)

选择器 引入方式基础选择器复合选择器属性匹配选择器结构伪类选择器伪元素选择器 引入方式 1&#xff1a;外联 <!-- css引入方式1&#xff1a;外联 外联与内嵌优先级相同&#xff0c;取决于加载顺序 --><link rel"stylesheet" href"./样式.css"…

基于SpringBoot+Vue的养老院管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

Spring Cloud常见面试题

1.请说说你用过Spring Cloud哪些组件&#xff1f;这些组件分别有什么作用&#xff1f; 1、注册中心&#xff1a;Eureka、Nacos、Zookeeper、Consul&#xff1b;&#xff08;服务注册&#xff09; 2、负载均衡&#xff1a;Ribbon、LoadBalancer&#xff1b;&#xff08;客户端的…

文件误删危机应对:数据恢复全解析

文件误删&#xff1a;数字化时代的隐形挑战 在数字化的浪潮中&#xff0c;文件已成为我们工作、学习和生活中不可或缺的一部分。它们记录着我们的思想、成果与回忆&#xff0c;是连接现实与虚拟世界的桥梁。然而&#xff0c;这份便捷与高效背后&#xff0c;却隐藏着文件误删这…

集群聊天服务器项目【C++】(三)muduo库的简单介绍

在上一讲中介绍了Json库的相关知识&#xff0c;本次接着介绍muduo库的相关内容&#xff0c;这些知识在本项目中都会使用到。 1.muduo库简介 muduo库顶层就是epoll&#xff08;IO复用技术&#xff09; Linux的pthread多线程&#xff0c;所以只能安装在Linux系统中。此外它依赖…

Transformer学习(4):位置编码 Positional Encoding

为什么需要位置编码 在自注意力编码中&#xff0c;所有 a a a的计算都并行同时执行得到对应的 b b b&#xff0c;可以并行就代表着 a a a之间是不存在先后顺序关系的&#xff0c;这存在问题。 在不使用位置编码时&#xff0c;将 a 2 a_2 a2​与 a 3 a_3 a3​的顺序打乱&#…

java项目之疫情下图书馆管理系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的疫情下图书馆管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息。 项目简介&#xff1a; 疫情下图书馆管理系…