主要解决子应用内部跳转路由时,跳到404页的问题

  • 你能搜这个,我姑且认为你基本配置已经好了,而且子的一级路由是正常的,请往下看
  • 忘说了,我的主应用和子应用都是Vue

主应用跳子应用都正常,为什么子应用跳子路由就会404?注意这三点

  • 主应用中,你配置子应用路由的地方
  {
name: 'micro app',
entry: '//localhost:8080',
container: '#microContainer',
activeRule: '/micro-app' // 记住它,姑且叫它【张三】
}
  • 主应用的router.js(或者router.ts)
      {
path: '/micro-app/', // 跟张三一致
component: layout,
name: 'platform',
meta: {...},
children: [
{
path: ':pathMatch(.*)', // 这个表示在张三下的所有路由均有效【关键】,注意vue2和vue3配置名称不同,请自行百度
component: MicroApp, // 你需要封装一个组件,里面就放个<div id="#microContainer"></div>,用于显示子应用页面
name: 'children',
meta: {...},
}
]
}
  • 最后看看你的子应用router.js(或者router.ts)的模式中设置的路由前置
history: createWebHistory('/micro-app') //括号里一依旧是张三,注意vue2和vue3配置方法不同,请自行百度
  • 好了,再试试?

qiankun+vue,为什么我的子应用的子路由老是跳404?这么解决的更多相关文章

  1. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  2. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  3. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  4. vue父组件引用子组件方法显示undefined问题原因及解决方法

    关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...

  5. vue 父组件与子组件的三生三世

    父组件和子组件相互传值:https://www.cnblogs.com/cxscode/p/11187989.html vue父组件触发子组件方法:https://www.cnblogs.com/cx ...

  6. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  7. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

  8. vue双向数据绑定对于数组和新增对象属性不能监听的解决办法

    出现数组不能按照索引进行跟新的原因是处于性能考虑的,但是整体数组的增加删除是可以监听到的:对于对象新增属性不能监听是因为没有在生成vue实例时候放进watcher收集依赖. 首先我们先来了解vue数据 ...

  9. vue 父组件传递子组件事件

    在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...

随机推荐

  1. 丽泽普及2022交流赛day16 社论

    这场比较平凡吧 . 省流: http://zhengruioi.com/contest/1087 目录 目录 A. Gene 题面 题解 算法一(正解) 算法二 B. Fight 题面 题解 算法一( ...

  2. 使用Hexo建立一个轻量、简易、高逼格的博客

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_93 在之前的一篇文章中,介绍了如何使用Hugo在三分钟之内建立一个简单的个人博客系统,它是基于go lang的,其实,市面上还有一 ...

  3. 在VMD上可视化hdf5格式的分子轨迹文件

    技术背景 在处理分子动力学模拟的数据时,不可避免的会遇到众多的大轨迹文件.因此以什么样的格式来存储这些庞大的轨迹数据,也是一个在分子动力学模拟软件设计初期就应该妥善考虑的问题.现有的比较常见的方式,大 ...

  4. 如何让 JS 代码不可断点

    绕过断点 调试 JS 代码时,单步执行(F11)可跟踪所有操作.例如这段代码,每次调用 alert 时都会被断住: debugger alert(11) alert(22) alert(33) ale ...

  5. Modbus转Profinet网关案例 | 三菱FR-A700系列变频器配置方法

    本案例是利用小疆智控Modbus转Profinet网关GW-PN5001把三菱FR-A700变频器接入到西门子1200PLC.实现Profinet转Modbus的通讯协议的互转. 用到设备有:三菱FR ...

  6. 官宣!DolphinScheduler 毕业成为 Apache 软件基金会顶级项目

    全球最大的开源软件基金会 Apache 软件基金会(以下简称 Apache)于北京时间 2021年4月9日在官方渠道宣布Apache DolphinScheduler 毕业成为Apache顶级项目.这 ...

  7. 【深入学习.Net】.泛型集合【体检管理系统】

    基于泛型List的体检管理系统(蜗牛爬坡) 第五章[体检管理系统] 一.项目展示图(基于.net core6.0) 二.首先准备两个Model类 HealthCheckItem(项目类):Name(项 ...

  8. 一例智能网卡(mellanox)的网卡故障分析

    一例智能网卡(mellanox)的网卡故障分析 背景:这个是在centos 7.6.1810的环境上复现的,智能网卡是目前很多 云服务器上的网卡标配,在oppo主要用于vpc等场景,智能网卡的代码随着 ...

  9. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  10. Windows API 学习

    Windows API学习 以下都是我个人一些理解,笔者不太了解windows开发,如有错误请告知,非常感谢,一切以microsoft官方文档为准. https://docs.microsoft.co ...