vue路由传递参数及接收参数

vue路由传递参数及接收参数

路由的跳转传参方式

<div class="xq" @click="routeGo(item)">携带参数去详情页面</div>
routeGo(item) {
    
    
  const detInfo = item
  localStorage.setItem('detInfo ', JSON.stringify(detInfo ))
  this.$router.push({
    
    
    path: '/details',
    query: {
    
     detInfo : detInfo }
  })
}

details.vue 接收参数

export default {
    
    
  data () {
    
    
    return {
    
    
      detInfo : {
    
    }//'订单详情',
    }
  },
  created () {
    
    
    //方法一接收参数
    this.detInfo = this.$route.query.detInfo 
    //方法二接收参数
    this.detInfo = JSON.parse(localStorage.getItem('detInfo '))
  },
}