老师,关于点击轮播图跳转问题

来源:7-2 购买详情页 - 添加路由(2)

Willsf

2018-02-25

http://img.mukewang.com/szimg/5a92d1d50001fd1205080297.jpg

// 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回答

fishenal

2018-02-26

原因是,这里采用a标签 href的方法跳转,而前端路由采用的不是html5模式,所以程序本身就是通过hash(#)来判断路由的。


这是我的旧代码写的不算太好,最好的做法是通过路由的name去跳转,外层a标签改成

<router-link :to="{ name: 'xxx'}"></router-link>

https://github.com/fishenal/vuejs-demo-project

这里都是我优化过的项目代码

1
1
Willsf
非常感谢!
2018-02-26
共1条回复

Willsf

提问者

2018-02-25

只有加入#号 href:'#/detail/count'才能正常跳转,不知道是为什么

0
0

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0,组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程