Vue2中路由传参的两种方式

路由传参方式

一、query方式

to字符串写法

  <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

to对象写法

        <!-- 路由传参 to的对象写法 -->
        <router-link :to="{
           name:'xiangqing',
            query:{
                id:m.id,
                title:m.title
            	}
            }">
            {{m.title}}
        </router-link>&nbsp;&nbsp;
        </li>

接受方式

this.$router.query.id
this.$router.query.title

二、params方式

在路由前的组件通过:to="/home/message/detail/${m.id}/${m.title} 传递参数
to的字符串学法

 <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;

to的对象写法

        <router-link :to="{
          name:'xiangqing',
          params: {
            id : m.id,
            title:m.title
          }
        }">
        {{m.title}}
      </router-link>&nbsp;&nbsp;

---

!!!注意 在param方式使用to的对象方式传参必须使用 name属性去跳转路由不能用path

---

        <router-link :to="{
          path:'/home/message/detail',   //这种方式报错
          params: {
            id : m.id,
            title:m.title
          }
        }">
        {{m.title}}
      </router-link>&nbsp;&nbsp;

params 方式需要在router/index.js文件中找到对应的路由规则,用 /:id/:title 去占位

          // 这是一个嵌入路由规则
          children: [
            {
              name:'xiangqing',
              path: 'detail/:id/:title',
              component: Detail
            }

接受数据

this.$route.params.id
this.$route.params.title