页面重新加载时不呈现Vue ChartJS

是因为Vue ChartJS是基于Vue.js的图表库，它需要在Vue组件的生命周期中进行初始化和渲染。当页面重新加载时，Vue组件会重新创建，而Vue ChartJS的初始化和渲染过程需要在Vue组件的mounted钩子函数中进行。如果页面重新加载，Vue组件会重新挂载，但是mounted钩子函数不会再次触发，导致Vue ChartJS无法重新初始化和渲染。

为了解决这个问题，可以在Vue组件的created钩子函数中进行Vue ChartJS的初始化和渲染。created钩子函数在Vue组件实例创建完成后立即调用，可以确保Vue ChartJS在页面重新加载时重新初始化和渲染。

以下是一个示例代码：

<template>
  <div>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  created() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = this.$refs.chart.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }
};
</script>

在上述示例中，我们在Vue组件的created钩子函数中调用了renderChart方法，该方法通过获取canvas元素的引用，使用Chart.js库创建了一个柱状图，并传入了相应的数据和配置。这样，在页面重新加载时，Vue组件会重新创建，created钩子函数会被调用，从而重新初始化和渲染Vue ChartJS图表。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。