主应用怎么跳转到子应用其中一个路由

Question

主应用怎么跳转到子应用某一个路由

Answer 1

Harry_wang 2024-01-08 10:23:59

micro-app标签上可以设置default-page属性，使用方式<micro-app name='xx' url='xx' default-page='指定页面地址'></micro-app>

• 凝弧 #1

  官网文档写了 禁用虚拟路由后，default-page 是不生效的

• Harry_wang 回复 凝弧 #2

  依次实现以下4步：
  1、主应用项目中的路由文件修改如下：
  const routes = [
    {
      // /childApp表示子应用入口页
      path: '/childApp/*',  // vue-router@4.x path的写法为：'/childApp/:page*'
      ...
    },
  ]
  2、childApp子应用项目中的路由文件修改如下：
  const router = new VueRouter({
    base: window.__MICRO_APP_BASE_ROUTE__ || '/',
    ...
  })
  3、主应用的子应用视图中记得设置baseroute，如下：
  <micro-app url='http://www.xxx.com'  baseroute='/childApp'></micro-app>
  4、最后一步，从主应用跳转到childApp子应用的page1页面，则使用router.push('/childApp/page1')

• qq_麻小烦_0 回复 Harry_wang #3

  回复 Harry_wang：我按这个方式去做了。1、链接跳对了，但是页面并没有改变；2、另个问题如果页面内子应用互相跳转，在点主应用的菜单没反应

点开查看后面1条评论