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