Vue项目路由跳转后jsCalendar不显示仅刷新正常如何解决

问题原因 #

simple-jscalendar默认采用IIFE格式打包，导入后不会暴露ES模块导出对象，而是直接将jsCalendar挂载到全局window对象上，同时该库的自动初始化逻辑依赖页面load事件，单页应用路由跳转时load事件早已触发，因此不会自动执行日历渲染。

解决方法 #

方案1：调用全局自动扫描方法 #

直接调用window上挂载的autoFind方法触发全页面日历元素扫描初始化即可：

// Calendar.vue的script部分
import 'simple-jscalendar'

export default {
  emits: ['page-data'],
  mounted() {
    window.jsCalendar.autoFind()
    this.$emit('page-data', {title: 'calendar', content: ''})
  },
}

方案2：手动指定节点初始化（更推荐） #

通过ref手动指定日历挂载节点，避免页面存在多个日历元素时产生冲突，可控性更高：

<template>
    <div ref="calendarEl" class="black-theme"
         data-navigator-position="right"
         data-month-format="month YYYY"
         data-day-format="DDD">
    </div>
</template>

<script>
import 'simple-jscalendar'

export default {
  emits: ['page-data'],
  mounted() {
    // 仅初始化当前组件内的日历节点
    new window.jsCalendar(this.$refs.calendarEl)
    this.$emit('page-data', {title: 'calendar', content: ''})
  },
}
</script>

<style>
@import '~simple-jscalendar/source/jsCalendar.css';
@import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>

两种方案均可以兼容路由跳转和直接访问两种场景，日历会正常渲染并添加jscalendar-loaded标记属性。

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