Vue 3+Vue Router下如何暴露Window对象自定义属性

全局挂载组件（最直接方案） #

既然不想改动WidgetContainer的逻辑，最简单的方式就是在App.vue里把它和<router-view>并列渲染，而非放到单个路由组件中。这样App初始化时组件就会执行onMounted钩子，window.myWidget会被稳定添加到全局，不受路由切换影响。

代码示例：

<!-- App.vue -->
<template>
  <div id="app">
    <WidgetContainer />
    <router-view />
  </div>
</template>

<script>
import WidgetContainer from './components/WidgetContainer.vue'

export default {
  components: { WidgetContainer }
}
</script>

路由守卫强制触发组件挂载（组件必须在路由内的场景） #

如果WidgetContainer只能作为某个路由组件的子组件存在，可通过全局前置守卫确保应用首次加载时进入该路由，保证组件挂载并执行钩子：

// router/index.js
router.beforeEach((to, from, next) => {
  // 首次进入应用时，跳转到包含WidgetContainer的目标路由
  if (from.path === '/' && to.path !== '/target-route') {
    next('/target-route')
  } else {
    next()
  }
})

不过这种方案会强制路由跳转，灵活性不如全局挂载，优先推荐第一种方案。

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