解决若依Vue3前后端分离---路由切换时显示白屏

解决若依Vue3前后端分离---路由切换时显示白屏

1.问题重述

解决基于Vue3若依前后端分离项目中出现的路由正常切换但是就是不显示数据的问题,也就是不发起网络请求的问题。

找到如下位置中AppMain.vue文件

将除了css中的代码进行替换成如下的代码。

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="routeKey">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component
              v-if="!route.meta.link"
              :is="Component"
              :key="route.path"
          />
        </keep-alive>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

<script setup>
import { useRoute } from 'vue-router';
import iframeToggle from './IframeToggle/index';
import useTagsViewStore from '@/store/modules/tagsView';
const route = useRoute();
const routeKey = computed(() => route.path + Math.random());


const tagsViewStore = useTagsViewStore();
</script>

 

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

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

相关文章

element-ui表单验证同时用change与blur一起验证

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 当审批时不通过审批意见要必须输入&#xff0c; 1&#xff1a;如果用change验证的话删除所有内容时报错是massage的提示&#xff0c;但是在失去焦点的时候报错就成了英文&#xff0c;如下图&#xf…

K8S--Ingress的作用

原文网址&#xff1a;K8S--Ingress的作用-CSDN博客 简介 本文介绍K8S的Ingress的作用。 ----------------------------------------------------------------------------------------------- 分享Java真实高频面试题&#xff0c;吊打面试官&#xff1a; Java后端真实面试题…

【MIdjourney】几种独特的艺术风格

1.合成器波(Synthwave) Synthwave是一种音乐风格&#xff0c;起源于20世纪80年代电子音乐和电影的复古元素。这种音乐风格通常包括合成器音乐、电子鼓声和强烈的电子声效&#xff0c;以模拟80年代电影和视频游戏的声音。Synthwave的特点包括浓厚的合成器声音、强烈的节奏和对复…

代码随想录 Leetcode541. 反转字符串 II

题目&#xff1a; 代码(首刷自解 2024年1月16日&#xff09;&#xff1a; class Solution { public:void reverse(string& s,int left,int right) {char temp;while (left < right) {temp s[left];s[left] s[right];s[right] temp;left;--right;}return;}string rev…

[NSSCTF Round#16 Basic]了解过PHP特性吗

了解过PHP特性吗 wp 第一页题目代码&#xff1a; <?php error_reporting(0); highlight_file(__FILE__); include("rce.php"); $checker_1 FALSE; $checker_2 FALSE; $checker_3 FALSE; $checker_4 FALSE; $num $_GET[num]; if (preg_match("/[0-9]/…

基于Yolov5+Deepsort+SlowFast算法实现视频目标识别、追踪与行为实时检测

前言 前段时间打算做一个目标行为检测的项目&#xff0c;翻阅了大量资料&#xff0c;也借鉴了不少项目&#xff0c;最终感觉Yolov5DeepsortSlowfast实现实时动作检测这个项目不错&#xff0c;因此进行了实现。 一、核心功能设计 总的来说&#xff0c;我们需要能够实现实时检测视…

pyhton实现录屏

python代码录屏录音 写的不是很好&#xff0c;不如那些obs的录屏软件&#xff0c;而且没有实现音频和视频的合并&#xff0c;请多见谅。 def audio_record() 实现音频录制 def video_record() 实现视频录制 def on_press(key) 按键监听 import time,threading from datetime i…

【project】estimate Aβ-PET pattern

1.17 1.16 1.14 写一个函数&#xff0c;输入是每个文件的地址&#xff0c;然后能做这一系列的操作 用AFM0095进行bbr的配准 方法一&#xff0c;间接配准&#xff0c;frmi先到str&#xff0c;再到mni&#xff08;str2fmri后再fmri2str&#xff09; fmri2str 只需要dof 6,6个自…

ROS第 2 课 ROS 系统安装和环境搭建

文章目录 方法一&#xff1a;一键安装&#xff08;推荐&#xff09;方法二&#xff1a;逐步安装&#xff08;常规安装方式&#xff09;1.版本选择2.检查 Ubuntu 的软件和更新源3.设置 ROS 的下载源3.1 设置国内下载源3.2 设置公匙3.3 更新软件包 4. 安装 ROS5. 设置环境变量6. …

leetcode 2418. 按身高排序

题目 给你一个字符串数组 names &#xff0c;和一个由 互不相同 的正整数组成的数组 heights 。两个数组的长度均为 n 。 对于每个下标 i&#xff0c;names[i] 和 heights[i] 表示第 i 个人的名字和身高。 请按身高 降序 顺序返回对应的名字数组 names 。 解题方法&#xff…

Kafka-RecordAccumulator分析

前面介绍过&#xff0c;KafkaProducer可以有同步和异步两种方式发送消息&#xff0c;其实两者的底层实现相同&#xff0c;都是通过异步方式实现的。 主线程调用KafkaProducer.send方法发送消息的时候&#xff0c;先将消息放到RecordAccumulator中暂存&#xff0c;然后主线程就…

SpringBoot教程(十七) | SpringBoot中ApplicationEvent用法

SpringBoot教程(十七) | SpringBoot中ApplicationEvent用法 对不起大家&#xff0c;昨天文章里的告别说早了&#xff0c;这个系列还不能就这么结束。 我们前面的文章中讲解过RabbitMQ的用法&#xff0c;所谓MQ就是一种发布订阅模式的消息模型。在Spring中其实本身也为我们提供…

如何十分钟快速看懂一篇英文CV论文?

已经2024年了&#xff0c;该出现一个写论文解读的AI Agent了。 大家肯定也在经常刷论文吧。 但真正尝试过用GPT去刷论文、写论文解读的小伙伴&#xff0c;一定深有体验——费劲。其他agents也没有能搞定的&#xff0c;今天我发现了一个超级厉害的写论文解读的agent &#xff…

快速上手的 AI 工具-文心一言

简介 最近正打得火热的AIGC概念&#xff0c;相信大家肯定也都多少接触到了&#xff0c;那么AIGC概念股到底是什么呢&#xff1f;我个人最近也看了一些平台如&#xff1a;文心一言、通义千问、讯飞星火、豆包等等&#xff01;各位朋友也千万不要错过啦&#xff0c;真是各有各的特…

国考省考行测:语句排序,选择首句、选择尾句

国考省考行测&#xff1a;语句排序 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#xff0c;附带行测和申论&#xff0c;而常规国考省考最重要的还是申论和行测&#xff0c;所以大家认真准备吧&#xff0c;我讲一起屡屡申论和行测的重要知识点 遇到…

MySQL之单表查询

素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作 等 CREATE TABLE worker ( 部门号 int(11) NOT NULL, 职工号 int(11) NOT NULL, 工作时间 date NOT NULL, 工资 float(8,2) NOT NULL, 政治面貌 varchar(10) NO…

二阶构造设计模式

目录 构造函数回顾 深入思考 实验 构造函数的真相 半成品对象 引入二阶构造设计模式 设计理念 二阶构造设计模式图 二阶构造示例 完整demo 小结 构造函数回顾 类的构造函数用于对象的初始化。构造函数与类同名并且没有返回值。构造函数在对象定义时自动被调用 深入…

《机器人学一(Robotics(1))》_台大林沛群 第4周 Quiz4

前两题主要是细心观察即可&#xff0c;第三题主要是使用勾股定理以及简单的反三角函数求解即可&#xff0c;长度与角度答案分别为80和30&#xff0c;不作赘述&#xff0c;主要阐述从第四题开始的解题过程。 目录 P4.P5 - P7.P8. P4. 根据上述推导过程编写代码如下: import num…

nn.BCEWithLogitsLoss中weight参数和pos_weight参数的作用及用法

nn.BCEWithLogitsLoss中weight参数和pos_weight参数的作用及用法 weight参数pos_weight参数 weight参数 上式是nn.BCEWithLogitsLoss损失函数的计算公式&#xff0c;其中w_n对应weight参数。 如果我们在做多分类任务&#xff0c;有些类比较重要&#xff0c;有些类不太重要&…

Java实现城市桥梁道路管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询城市桥梁4.2 新增城市桥梁4.3 编辑城市桥梁4.4 删除城市桥梁4.5 查询单个城市桥梁 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的城市桥梁道路管理系统&#xff0c;支持…