vue-动态路由（路由的传参和接参）

路由传参

---

通过router-link的to属性中的params或query实现
params在地址栏显示的时候不会显示键值对，直接是值跟在后面
而query会有键名

//eg：
<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}">
</router-link>
//其中name就是roters中的路径别名

在routes配置时，注意params

{
path: '/list/:id',  //接收params传来的id
component: Detail,
name: 'detail'
}

注：使用了name属性，路由配置那边就要用路径别名

{ 
   path: 'list', // 容易犯错点  /yyb X 
   component: Yyb,
   name: 'list' //命名路由
}

来一个列表页跳详情页的案例

组件处：src/pages/list/index.js

<template>
  <div class="list-box">
    <ul>
      <li
        v-for = "item in lists"
        :key = "item.id"
      >
        <router-link :to="{
          name: 'detail',
          params: {
            id: item.id,
          },
          query: {
            img: item.pic,
            name: item.d_title,
            yuanjia: item.yuanjia,
            jiage: item.jiage,
            xiaoliang: item.xiaoliang
          }
        }">
          <div class="img-box">
            <img :src="item.pic" alt="">
          </div>
          <div class="content-box">
            <h3> {{ item.d_title }} </h3>
            <div class="content">
              <div class="price">
                <span> 天猫价 {{ item.yuanjia }} </span>
                <span> 劵后价 {{ item.jiage }} </span>
              </div>
              <div class="num">
                <span> 已售 {{ item.xiaoliang }} 件 </span>
              </div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lists: null 
    }
  },
  async created () {
    console.log( this )
    const result = await this.$http({
      url: '/index.php',
      params: {
        r: 'class/cyajaxsub',
        page: 1,
        cid: this.$route.query.cid, // 路由的动态接参
        px: 't',
        cac_id: '',
      }
    })
    this.lists = result.data.data.content 
  }
}
</script> 

routes处的路由配置

{
    path: '/list',//这里路由路径不要给我写成大写    \
    component: List,
    name: 'list'
  },
  {
    path: '/detail/:id',  //接收params传来的id
    component: Detail,
    name: 'detail'
  },

路由接参

---

我们发现凡是使用了路由的组件，我们统称为： 路由组件
路由组件身上会自动添加一个 $route的数据
params: this.$route.params.id
query: this.$route.query.xxx

接着上面的案例，这里是详情页

<template>
  <div class="detail-box">
    <img :src="src" alt="">
    <h3> {{ name }} </h3>
    <p> 天猫价 {{ yuanjia }} </p>
    <p> 券后价 {{ jiage }} </p>
    <p> 已售{{ xiaoliang }} 件 </p>
    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    <br>
    <el-button type="warning" @click.native = "addCar"> 加入购物车 </el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 1
    }
  },
  computed: {
    src () {
      return this.$route.query.img
    },
    name () {
      return this.$route.query.name 
    },
    yuanjia () {
      return this.$route.query.yuanjia
    },
    jiage () {
      return this.$route.query.jiage
    },
    xiaoliang () {
      return this.$route.query.xiaoliang
    }
  },
  methods: {
    handleChange ( val ) {
    },
    getCar () {
      return localStorage.getItem('shopcar') && JSON.parse( localStorage.getItem('shopcar') ) || []
    },
    save ( arr ) {
      localStorage.setItem('shopcar',JSON.stringify( arr ))
    },
    addCar () {
      const shopcar = this.getCar()
      const { name,yuanjia,jiage,xiaoliang,img } = this.$route.query
      const { id } = this.$route.params
      if ( shopcar.length == 0 ) {
        //没有购物车
        shopcar.push({
          id, name,yuanjia,jiage,xiaoliang,img,
          num: this.num,
          f: false // 用于全选，反选
        })
        // 存入本地存储
        this.save( shopcar )
      } else {
        // 有购物车
        const f = shopcar.some( item => item.id == id )
        if ( f ) {
          // true   购物车已经有这个商品了
          shopcar.map( item => {
            if ( item.id == id ) {
              item.num += this.num 
              return ;
            }
          })
          // 同步本地存储
          this.save( shopcar )
        } else {
          // false  购物车是没有这个 商品的
          shopcar.push({
            id, name,yuanjia,jiage,xiaoliang,img,
            num: this.num,
            f: false // 用于全选，反选
          })
          this.save( shopcar )
        }
      }
    }
  }
}
</script>