vue-router的param属性

使用param属性，url的格式为（没有问号，都是斜杠）：

http://localhost:8080/#/home/message/detail/003/%E6%B6%88%E6%81%AF3

param.PNG

message.vue文件

 <!-- 字符串写法 -->
    <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

/{m.title}要用/把参数分开，router文件夹下面index.js的路由配置中的用路由跪着：占位，例如：

   {
     path:'message',
     component:Message,
     children:[//拼接message这个路由
      {
       name:'detail',
      //:x,:y占位
       path:'detail/:x/:y', //detail/${m.id}/${m.title},会赋值如x=${m.id}，y=${m.title}
       component:Detail
     }
     ]
    }

detail.vue中的$route属性就能接收到x和y，如下：

（接收的是path里面的x和y），总的流程就是message.vue to属性的/里面的值 给router文件夹下面index.js的path里面的冒号占位符，冒号占位符在把值传给detail.vue（message.vue跳转到detail.vue【:to="/home/message/detail/${m.id}/${m.title}"】）

• message.vue传给index.js，index.js传给detail.vue

<template>
  <div>
   <h2>消息详情：{{$route.params.x}}</h2>
   <h2>消息编号：{{$route.params.y}}</h2>
  </div>
</template>

---

message.vue文件

  <!-- 对象写法 -->
    <!-- name：写的是路由配置里面的名字，一定要写，但是不能只写path -->
    <!-- {{m.title}}这个要写，不然没有焦点，无法触发detail子路由组件 -->
    <router-link :to="{
      name:'detail',
       params:{
         x:m.id,
         y:m.title
       }
      }"
    >{{m.title}}</router-link>

params的数据x和y，和路由里面的path的:x/:y命名一致