老师,关于点击轮播图跳转问题
来源: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