vue嵌套路由

使用vue-cli开发者工具

index.vue(主页面) 渲染数据

<ul>
     <li v-for="item,index in swiperArr" :key='index' @click="go(index,item)">
          <img :src="item.imgSrc" alt="">
     </li>
</ul>

methods:{
 go(index,item){
      this.$router.push({
          path:'detail/'+index
      })
      window.eventBus.$emit('prop',item)
    }
}

router index.js中

export default new Router({
  routes: [
    {
      path:'/',
      component:Index,
      children:[
        {
          path:'detail/:index',
          component:detail
        }
      ]
    }
  ]
})

详情页面 detail.vue

<template>
<div class="detail" @click="$router.back()">详情</div>
</template>

<script>
export default{
	data(){
		return {
			item: {}
		}
	},
	mounted(){
		window.eventBus.$on('prop',(data)=>{
			console.log(1)
			console.log(data)
			this.item = data
		})
	}
}
</script>

这样就可以跳转到详情页面并可以获取到数据啦