主要解决子应用内部跳转路由时,跳到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. React报错之组件不能作为JSX组件使用

    正文从这开始~ 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单 ...

  2. Linux系列之压缩命令

    前言 Linux 有三个常用的压缩命令:gzip.bzip2和 tar .本文介绍它们的区别和简单用法. 压缩文件 数据压缩是去除数据中冗余部分的过程,需要通过压缩算法完成.这些算法可分为两类: 无损 ...

  3. 从贡献第一个 pr 开始,我的开源之路正式开启

    点击上方蓝字关注我们 1 我是一名开源爱好者 我是李进勇,Github Id:JinyLeeChina,目前就职于政采云,专注于大数据平台及数仓领域,是开源项目爱好者. 2 我与小海豚的不解之缘 记得 ...

  4. SP6779 GSS7 - Can you answer these queries VII(线段树,树链剖分)

    水题,只是坑点多,\(tag\)为\(0\)时可能也要\(pushdown\),所以要\(bool\)标记是否需要.最后树链剖分询问时注意线段有向!!! #include <cstring> ...

  5. 安装 NetworkManager(Debian最小化安装)

    Debian最小化安装是没有NetworkManager 1 安装: 2 [root@debian]apt install -y netwok-manager 1 启动(查看网卡): 2 [root@ ...

  6. bbs项目解读

    1.注册功能 具体的效果图如下: 注册功能涉及到的逻辑步骤: 1.搭建前端html页面 2.向后端提交用户输入数据 3.对用户输入的数据格式进行校验 4.页面输入数据格式错误,及时向用户进行提示/正确 ...

  7. 简单html js css 轮播图片,不用jquery

    这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...

  8. flask-restful使用指南

    flask-restful是flask模块的一个扩展,能够快速构建restful风格的api.对于其他的扩展也有很高的兼容性. 安装flask_restful pip install flask_re ...

  9. KingbaseES sys_blocking_pids 函数

    会话出现了锁等待,想要快速查询到堵塞的会话,可以使用 sys_blocking_pids 函数来实现这一目的. sys_blocking_pids:获取哪些会话阻塞了某个会话(输入参数). sys_b ...

  10. KingbaseES 客户端工具安装

    关键字: KingbaseES.Java.ClientTools 一.安装前准备 1.1 软件环境要求 金仓数据库管理系统KingbaseES V8.0支持微软Windows 7.Windows XP ...