如何在Vue应用外部将router-view挂载到#outApp？

这个问题我之前也碰到过，核心原因很简单：必须处于Vue实例的DOM作用域内，才能被Vue Router正确渲染。当你把它放到#app外部的#outApp时，它不在主Vue实例的管理范围内，自然无法工作。下面分Vue版本给你两种可行的解决方案：

方案一：Vue 3 推荐使用Teleport组件 #

Vue 3新增的Teleport（传送门）组件就是专门解决这类“跨DOM层级渲染”的场景，它能把组件内容无缝转移到DOM的任意位置，同时保持组件和Vue实例的关联。

步骤1：调整你的DOM结构 #

把原来的<code id="outApp"><router-view></router-view></code>改成普通的容器节点（因为router-view需要放在Vue组件内部，再通过Teleport传送）：

<div id="app">
  <!-- 除了移除原来的router-view，其余内容保持不变 -->
</div>
<h2>Outside:</h2>
<div id="outApp"></div>

步骤2：在根组件中使用Teleport包裹router-view #

在你的根组件（比如App.vue）里，用Teleport把指向#outApp：

<template>
  <div>
    <!-- 这里是#app内部的原有内容 -->
    <Teleport to="#outApp">
      <router-view></router-view>
    </Teleport>
  </div>
</template>

这样配置后，的渲染内容会被“传送”到#outApp节点中，同时它依然属于主Vue实例的一部分，路由的所有功能（比如导航守卫、路由参数）都能正常工作。

方案二：Vue 2 手动挂载共享路由的子实例 #

Vue 2没有Teleport，但可以通过创建一个共享路由实例的子Vue实例，专门挂载到#outApp来实现需求。

步骤1：保持DOM结构和上面一致 #

<div id="app">
  <!-- 原有内容不变 -->
</div>
<h2>Outside:</h2>
<div id="outApp"></div>

步骤2：创建共享路由的双实例 #

先创建全局的路由实例，然后分别挂载主实例和子实例，让它们共享同一个路由对象：

// 1. 先创建全局路由实例
const router = new VueRouter({
  routes: [
    // 你的路由配置项，比如：
    // { path: '/', component: Home },
    // { path: '/about', component: About }
  ]
})

// 2. 挂载主Vue实例到#app
new Vue({
  router,
  el: '#app',
  // 主实例的其他配置（data、methods等）
})

// 3. 创建子实例挂载到#outApp，使用同一个路由
new Vue({
  router,
  el: '#outApp',
  template: '<router-view></router-view>'
})

这个方案中，两个Vue实例共享同一个路由状态，路由变化时#outApp里的视图会和主实例同步更新。如果需要共享其他全局状态，可以搭配Vuex来实现。

小提示 #

• 如果你正在升级项目，优先选择Vue 3的Teleport方案，它更符合Vue的组件化设计，代码也更简洁。
• 不管用哪种方案，都要确保#outApp节点在Vue实例初始化之前就已经存在于DOM中，否则会找不到目标节点。

内容的提问来源于stack exchange，提问作者Peter Krauss