鍍金池/ 問答/C  HTML/ vue用swiper通過router-link進(jìn)入不動(dòng)，刷新頁面后動(dòng)，怎么解決？

vue用swiper通過router-link進(jìn)入不動(dòng)，刷新頁面后動(dòng)，怎么解決？或者告訴我怎么每次進(jìn)入一個(gè)路由都刷新頁面

vue用swiper通過router-link進(jìn)入不動(dòng),排版也不對(duì)，如圖
圖片描述

刷新頁面后就沒問題了，如圖
圖片描述

為什么？

代碼：
在百度網(wǎng)盤上可以下載代碼：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" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>     
<link  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" >
<link rel="stylesheet" >
<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>導(dǎo)航欄</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">叮咚</p>
                        </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:'#musical_instruments_view'
                }
            },{
                path:'/dingdong',
                component:{
                    template:'#dingdong'
                }
            },]
        })
        router.afterEach((to,from,next) => {
            window.scrollTo(0,0);
        });

        new Vue({
            el:'.view_box',
            router
        })
    </script>
</body>
</html>
回答
編輯回答
祉小皓

在/dingdong的mounted里面從新執(zhí)行一次 new Swiper

2018年7月30日 10:58
編輯回答
鐧簞噯

或者誰能告訴我下怎么才能每次進(jìn)入/dingdong都刷新頁面

2018年4月12日 11:20