Vue uses swiper to enter through router-link, refresh the page and then move, how to solve it? Or tell me how to refresh the page every time I enter a route. - Codes Helper

vue uses swiper to enter through router-link, and typesetting is not correct, as shown in figure
Why?
Code:
the code can be downloaded from Baidu"s online disk: https://pan.baidu.com/s/1ImGg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<!--  -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>     
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<script src="./js/ie-emulation-modes-warning.js"></script>
<link rel="stylesheet" type="text/css" href="./css/all.css">
<link rel="stylesheet" type="text/css" href="./css/musical instruments.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<style type="text/css">
.swiper-container {
        width: 50%;
        height: 500px;
    }  
    .swiper-slide{
        width: 50%;
        height: 500px;
    }
    .swiper-slide img{
        width: 100%;
        height: 90%;
    }
    .swiper-slide div{
        width: 100%;
        text-align: center;
    }
</style>
</head>
<body>
<div class="left" >
    <ul >
        <li></li>
        <li style="margin-top: 10px"><a href="./index.html"></a></li>
        <li><a href="./introduction.html"></a></li>
        <li class="click"><a href="./musical instruments.html"></a></li>
    </ul>
</div>
<div class="view_box right m0" >
    <img src="./image/music.jpg" alt="Pineapple" class="img" style="z-index: -1">  
    <router-view></router-view>
</div>
<template id="dingdong">
    <div class="pt">
        <router-link to="/"></router-link>
        <div class="container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png"><div></div></div>
                    <div class="swiper-slide"><img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" alt=""><div></div></div>
                    <div class="swiper-slide"><img src="http://img.zcool.cn/community/01f09e577b85450000012e7e182cf0.jpg@1280w_1l_2o_100sh.jpg" alt=""><div></div></div>
                    <div class="swiper-slide"><img src="http://img4.imgtn.bdimg.com/it/u=1060387669,1498970204&fm=214&gp=0.jpg" alt=""><div></div></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-scrollbar"></div>
            </div>
            
        </div>
    </div>
</template>

<template id="musical_instruments_view">
    <div class="" style="width: 100%">
        <div>
            
            <div class="plr list">
                
            </div>
            <div class="row m0" >
                <div class="col-md-3 img1 tc" >
                    <div>
                        <router-link to="/dingdong">
                            <img src="./image/dingdong.jpg" class="list_img">
                            <p class="list_info">
                        </router-link>
                    </div>
                </div>
                
            </div>
            
        </div>
    </template>


    <script type="text/javascript">
        window.onload = function() {
            var mySwiper = new Swiper (".swiper-container", {
                direction:"horizontal",
                loop: true,
                autoplay:1000,
                speed:2000,
                pagination: ".swiper-pagination",
                nextButton: ".swiper-button-next",
                prevButton: ".swiper-button-prev",
                  autoplayDisableOnInteraction : false,
                scrollbar: ".swiper-scrollbar",
  });
}        
        var router = new VueRouter({
            routes:[{
                path:"/",
                component:{
                    template:"-sharpmusical_instruments_view"
                }
            },{
                path:"/dingdong",
                component:{
                    template:"-sharpdingdong"
                }
            },]
        })
        router.afterEach((to,from,next) => {
            window.scrollTo(0,0);
        });

        new Vue({
            el:".view_box",
            router
        })
    </script>
</body>
</html>