极客观点
项目管理
HarmonyOS
vue用swiper通过router-link进入不动,排版也不对，如图
刷新页面后就没问题了，如图
为什么？
代码：
在百度网盘上可以下载代码：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">叮咚</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里面从新执行一次 new Swiper