Vue---路由跳转传参

?

1	<router-link :to="'/home/newsinfo/' + item.id">

　　接收

路由配置

// 创建路由对象

const router = new VueRouter({

  routes: [

  { path: '/home/newsinfo/:id', component: NewsInfo, props: true }, // 启用 props 来接收路由

页面接收

data(){

//将url地址中传递过来的id值，挂载到data上，

　　return {

　　　　id:this.$route.params.id

　　} 

}

或者

 props: ["id"],

## 实现了 新闻列表 到 新闻详情的 跳转

 1. 添加新闻详情组件

 2. 改造每一个 新闻列表项的 链接，为 `router-link`，其中， `to` 属性中的 id 值，需要动态拼接给每一个 router-link, 因此，需要把 `to`属性，改造成 `:to`，然后，属性值中的 统一路径前缀：`/home/newsinfo/` 应该被 单引号包裹起来，后面，在拼接上 `item.id` 即可

 3. 添加路由规则

 4. 当实现了以上三步之后，我们想在页面中，获取路由传递过来的参数：

  + 方式1： `$route.params.id` 来获取，比较麻烦，是老的方式

  + 方式2： 使用路由的`props`属性来传递参数：

     - 改造路由规则，在对应的规则中，添加 `props: true` 的属性

     - 在 组件中，定义`props: []` ，数组中定义的 名称，就是 路由规则中，对应参数的名称占位符（要保持一致）

 

 

项目实例

?

1	<a @click="handleTrainingStatus(record)">状态<a-icon type="bar-chart"/></a><br><br><br>handleTrainingStatus (record) {<br>  this.$emit('onTrainingStatus', record)<br>},

　接收

props: ['record'],