【Vue | 补洞 | 17】路由传参 & 路由prop配置

路由之间，如何传参？如何接受参数？如何通过 props 配置项，简化接收参数的操作？

一、路由传参

1. 作用

  用于路由跳转之间的参数传递

比如从购物车界面跳转到结算界面，需要把 购物车中的购物数据，传递给结算界面作为结算依据。

2. 用法

1）传递参数

  ① query 写法：<router-link :to="{path: 'xx', query: { key: value }}"

  ② params 写法：<router-link :to="{name: 'xx', params: { key: value }}"

2）接收参数值

  ① query 写法：this.$route.query.xxx

  ② params 写法：this.$route.params.xxx

3）query 和 params 写法的区别

• query
  • 在 router-link 中，to 属性允许使用 name 或 path 来指定路由
• params
  • 在 router-link 中，to 属性只允许使用 name 来指定路由
  • 声明路由时，需要声明 占位符 来声明参数，假设有 id 和 content 两个参数需要传递，如下代码

// src/router/index.js
...
export default new VueRouter({
  routes: [
    {
      path: '/Father/:id/:content',
      component: father,
    }
  ]
})

  如果传递的参数有很多个，在接收参数的地方都要重复写 this.$route.query.xxx 或 this.$route.params.xxx 来获取数据。有没有解决这种麻烦书写方式的方法？接着往下看！

二、路由 props 配置

1. 作用

  让路由组件更方便地接收参数。（避免重复 写 this.$route.query.xxx 这类语句）

2. 用法

1）对象写法

① 声明并传参

// src/router/index.js
...
export default new VueRouter({
  routes: [
    {
      name: 'fatherName',
      path: '/Father',
      component: father,
      props: {
          title: '波吉'
      }
    }
  ]
})

② 接收参数

// xxx.vue
export default {
	props: {
		title
	}
}

2）布尔值写法

若为真，会把收到的 params 参数 以 props 的形式传给该组件

① 声明

// src/router/index.js
...
export default new VueRouter({
  routes: [
    {
      name: 'fatherName',
      path: '/Father/:title',
      component: father,
      props: true
    }
  ]
})

② 传参

// 无需指定路径，直接指定 name 即可
<router-link :to="{
     name: 'fatherName',
     params: {
     	title: '波吉'
     }
}"></router-link>

③ 接收参数

// xxx.vue
export default {
	props: {
		title
	}
}

3）函数写法（推荐，比较灵活）

① 声明

  注意 接收一个 $route 参数，返回一个 对象

// 写法一
props($route) {
	return {
        id: $route.id,
        title: $route.title
    }
}

// 写法二：解构赋值拿到 query(或params) 参数
props({query}) {
	return {
        id: query.id,
        title: query.title
    }
}

// 写法三：解构赋值连续写法
props({query: {id, title}}) {
    return {id, title}
}

② 传参

// 无需指定路径，直接指定 name 即可
<router-link :to="{
     name: 'fatherName',
     // 这里写 params 或 query 都可以
     params: {
     	title: '波吉'
     }
}"></router-link>

③ 接收参数

// xxx.vue
export default {
	props: {
		id,
		title
	}
}

三、总结

• 通过 query 或 params 进行传参
• 通过 $router.query.xxx 或 $router.params.xxx 接收路由参数
• 通过路由的三种 props 配置方法，更加方便地在组件的 props 配置项中接收路由参数

---

更多相关文章，推荐阅读来补充知识体系~
【Vue | 补洞 | 15】路由和路由器，傻傻分不清
【Vue | 补洞 | 16】嵌套路由
【Vue | 补洞 | 18】编程式路由导航
【Vue | 补洞 | 19】路由守卫