首页 > 其他分享 >qiankun+vue,为什么我的子应用的子路由老是跳404?这么解决

qiankun+vue,为什么我的子应用的子路由老是跳404?这么解决

时间:2022-10-12 21:56:54浏览次数:57  
标签:vue app qiankun micro 404 应用 router 路由

主要解决子应用内部跳转路由时,跳到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配置方法不同,请自行百度
  • 好了,再试试?

标签:vue,app,qiankun,micro,404,应用,router,路由
From: https://www.cnblogs.com/Brid9e/p/16786082.html

相关文章

  • VSCode开发Vue
    常用快捷键设置前进和后退(返回上一个浏览位置/下一个浏览位置)快捷键在Windows中可以使用快捷键“Alt+←”/“Alt+→”/实现。 插件最新最全VSCODE插件推荐(2022版)......
  • vue 给元素或子组件添加标识ref
    给元素或子组件注册引用信息(id的替代者)//添加ref<h1ref="title"></h1>//相当于<h1id="title"></h1>//获取refthis.$refs.title;//相当于document.getElementById("title")......
  • vue+java AES 加密 解密
    后端:导入aes依赖<!--aes加密工具--><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.15</versi......
  • Vue10货物增删改查
    序实现简单的增删改查案例实现效果源码<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <style> th{ background-color:......
  • vue11 组件初识
    序组件(component)是vue.js最强大的功能之一。组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体。每个组件都是Vue的实例对......
  • webpack5 + vue3 打包问题
    1,打包后本地访问空白或者404问题解决办法:  2, 打包CSS图片路径不正确问题在生产模式下,使用的MiniCssExtractPlugin.loader代替style-loader,但图片、字体等资源......
  • Vue项目添加水印
    1.utils文件夹下创建canvas画布水印文件utils/watermark.jsletwatermark={}letsetWatermark=(str)=>{letid='1.23452384164.123412416';if(docume......
  • 2022-10-12 vue+uniapp+echarts 使用记录
    第一步:安装echartsnpmiecharts第二步:在main.js引入echartsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts第三步:在项目中使用<template>......
  • 2022-10-12 vue+uniapp+echarts 报错日志
    这里是vue+uniapp+echarts报错日志报错一:.initisundefined初始化图表失败,请检查你的echarts是否安装成功成功==》请检查你当前安装的版本是否过高,是==》降低版本(比......
  • Vue工程环境配置
    Vue1.vue-cli/webpack使用vue.js开发大型应用需要使用webpack打包工具,本节研究webpack的使用方法。Webpack是一个前端资源的打包工具,它可以将js、image、css等资源当......