vue -router 跳转不刷新怎么解决（不刷新 window.onload中渲染画布的函数就不执行）

Question

切换标签不显示 但如果刷新页面就能显示出来

切换的时候元素也都出来了

proSkill.vue

<template>
 <div class="wrapper">
    <span class="title">前端技能</span>
   <div class="canvasBox">
        <div class="skill">
        <canvas id="myChart1" width="10" height="10"></canvas>
   </div>
   <div class="skill">
        <canvas id="myChart2" width="10" height="10"></canvas>
   </div>
   </div>
   <span class="title">工具</span>
   <div class="canvasBox">
       <div class="skill">
        <canvas id="myChart3" width="10" height="10"></canvas>
   </div>
   <div class="skill">
        <canvas id="myChart4" width="10" height="10"></canvas>
   </div>
   </div>
   <span class="title">补充说明</span>
   <ol>
       <li>熟悉w3c规范，了解语义化，熟练掌握DOM、BOM、AJAX、JSON</li>
       <li>注重代码规范性，布局弹性，结构合理，在适配的时候尽量做到单一样式修改即可</li>
       <li>对http协议有一定理解，了解web服务器在通信中所扮演的角色</li>
       <li>对前端性能优化有一定理解</li>
       <li>能够结合不同框架运用合理的构建及包管理工具实现高效率开发</li>
       <li>认真刻苦，踏实好学，对选择的职业充满热情</li>
   </ol>
 </div>
    
</template>
<script>
    window.onload=function(){
        var ctx1 = document.getElementById("myChart1").getContext("2d");
        var data1 = {
            labels: ["htmml(h5)", "css", "js","less","es6"],
            datasets: [
               {
                   fillColor : "rgba(34,56,205,0.5)",
                    strokeColor : "rgba(34,56,205,1)",
                    pointColor : "rgba(34,56,205,1)",
                    pointStrokeColor : "#fff",
                    data : [90,80,70,70,40]
                }
            ]
        };
        var myRadarChart1 = new Chart(ctx1, {
            type: 'radar',
            data: data1,
            options: {
            scale: {
                    reverse: false,
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        
        var ctx2 = document.getElementById("myChart2").getContext("2d");
        var data2 = {
            labels: ["bootstrap", "semantic", "element","angular", "vue", "jquery","node"],
            datasets: [
               {
                   fillColor : "rgba(34,56,205,0.5)",
                    strokeColor : "rgba(34,56,205,1)",
                    pointColor : "rgba(34,56,205,1)",
                    pointStrokeColor : "#fff",
                    data : [90,80,50,60,60,70,40]
                }
            ]
        };
        var myRadarChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data2,
            options: {
            scale: {
                    reverse: false,
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        
        
        var ctx3 = document.getElementById("myChart3").getContext("2d");
        var data3 = {
            labels: ["webpack", "npm", "bower"],
            datasets: [
               {
                   fillColor : "rgba(34,56,205,0.5)",
                    strokeColor : "rgba(34,56,205,1)",
                    pointColor : "rgba(34,56,205,1)",
                    pointStrokeColor : "#fff",
                    data : [90,80,70,60,60]
                }
            ]
        };
        var myRadarChart3 = new Chart(ctx3, {
            type: 'radar',
            data: data3,
            options: {
            scale: {
                    reverse: false,
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        });
        
    
        var ctx4 = document.getElementById("myChart4").getContext("2d");
        var data4 = {
            labels: ["git", "svn", "webstorm","brackets"],
            datasets: [
               {
                   fillColor : "rgba(34,56,205,0.5)",
                    strokeColor : "rgba(34,56,205,1)",
                    pointColor : "rgba(34,56,205,1)",
                    pointStrokeColor : "#fff",
                    data : [70,70,70,70]
                }
            ]
        };
        var myRadarChart4 = new Chart(ctx4, {
            type: 'radar',
            data: data4,
            options: {
            scale: {
                    reverse: false,
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        Radar.defaults = {

            //Boolean - If we show the scale above the chart data            
            scaleOverlay : false,

            //Boolean - If we want to override with a hard coded scale
            scaleOverride : false,

            //** Required if scaleOverride is true **
            //Number - The number of steps in a hard coded scale
            scaleSteps : null,
            //Number - The value jump in the hard coded scale
            scaleStepWidth : null,
            //Number - The centre starting value
            scaleStartValue : null,

            //Boolean - Whether to show lines for each scale point
            scaleShowLine : true,

            //String - Colour of the scale line    
            scaleLineColor : "rgba(0,0,0,.1)",

            //Number - Pixel width of the scale line    
            scaleLineWidth : 1,

            //Boolean - Whether to show labels on the scale    
            scaleShowLabels : false,

            //Interpolated JS string - can access value
            scaleLabel : "<%=value%>",

            //String - Scale label font declaration for the scale label
            scaleFontFamily : "'Arial'",

            //Number - Scale label font size in pixels    
            scaleFontSize : 12,

            //String - Scale label font weight style    
            scaleFontStyle : "normal",

            //String - Scale label font colour    
            scaleFontColor : "#666",

            //Boolean - Show a backdrop to the scale label
            scaleShowLabelBackdrop : true,

            //String - The colour of the label backdrop    
            scaleBackdropColor : "rgba(255,255,255,0.75)",

            //Number - The backdrop padding above & below the label in pixels
            scaleBackdropPaddingY : 2,

            //Number - The backdrop padding to the side of the label in pixels    
            scaleBackdropPaddingX : 2,

            //Boolean - Whether we show the angle lines out of the radar
            angleShowLineOut : true,

            //String - Colour of the angle line
            angleLineColor : "rgba(0,0,0,.1)",

            //Number - Pixel width of the angle line
            angleLineWidth : 1,            

            //String - Point label font declaration
            pointLabelFontFamily : "'Arial'",

            //String - Point label font weight
            pointLabelFontStyle : "normal",

            //Number - Point label font size in pixels    
            pointLabelFontSize : 12,

            //String - Point label font colour    
            pointLabelFontColor : "#666",

            //Boolean - Whether to show a dot for each point

            pointDot : true,

            //Number - Radius of each point dot in pixels
            pointDotRadius : 3,

            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth : 1,

            //Boolean - Whether to show a stroke for datasets
            datasetStroke : false,

            //Number - Pixel width of dataset stroke
            datasetStrokeWidth : 2,

            //Boolean - Whether to fill the dataset with a colour
            datasetFill : false,

            //Boolean - Whether to animate the chart
            animation : true,

            //Number - Number of animation steps
            animationSteps : 60,

            //String - Animation easing effect
            animationEasing : "easeOutQuart",

            //Function - Fires when the animation is complete
            onAnimationComplete : null

        }
}
</script>

<style>
    .skill{
        width: 11rem;
        height: 11rem;
        float: left;
        padding: .5rem 9rem;
    }
    .title{
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
        color: aliceblue;
    }
    .canvasBox{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    ol{
        color: aliceblue;
        font-size: .9rem;
    }

</style>

Answer 1

我在mounted生命周期的创建，在watch监听数据变化chart.update()：

  mounted () {
    this.chart = new Chart(this.$refs.canvas, {
      type: this.type,
      data: this.data,
      options: this.options
    })
  },
  watch: {
    data () {
      this.$nextTick(() => {
        this.chart.update()
      })
    }
  }