老师,关于点击轮播图跳转问题
来源:7-2 购买详情页 - 添加路由(2)

Willsf
2018-02-25
// slideShow.vue部分代码 <div class="slide-img"> <a :href="slides[nowIndex].href"> <transition name="slide-trans"> <img v-if="isShow" :src="slides[nowIndex].src" alt=""> </transition> <transition name="slide-trans-old"> <img v-if="!isShow" :src="slides[nowIndex].src" alt=""> </transition> </a> </div> // index.vue 部分代码 <slideShow :slides=slides :inv=invTime></slideShow> // main.js配置路由 Vue.use(VueRouter) let router = new VueRouter({ routes: [ { path: '/', name: 'index', component: IndexPage }, { path: '/detail', component: DetailPage, redirect: '/detail/analysis', children: [ { path: 'analysis', name: 'analysis', component: DetailAnaPage }, { path: 'count', name: 'count', component: DetailCouPage }, { path: 'forecast', name: 'forecast', component: DetailForPage }, { path: 'publish', name: 'publish', component: DetailPubPage } ] } ] })
写回答
2回答
-
原因是,这里采用a标签 href的方法跳转,而前端路由采用的不是html5模式,所以程序本身就是通过hash(#)来判断路由的。
这是我的旧代码写的不算太好,最好的做法是通过路由的name去跳转,外层a标签改成
<router-link :to="{ name: 'xxx'}"></router-link>
https://github.com/fishenal/vuejs-demo-project
这里都是我优化过的项目代码
112018-02-26 -
Willsf
提问者
2018-02-25
只有加入#号 href:'#/detail/count'才能正常跳转,不知道是为什么
00
相似问题
轮播图实现
回答 1
左侧是边栏,右侧是内容区的路由问题
回答 2