路由组件传参：如果在一个页面中，需要根据路由去获得参数，去对页面进行一些逻辑处理，首先可以通过this.$router来获取路由实例的参数，这样页面组件和路由就进行了耦合，为了进行分离，更大程度复用，我们推出了路由组件传参的实现方案：
- 第一种传参方式为：布尔模式，它适用于有动态路由传参的路由配置中，实现思路为：将路由的参数作为属性来传入到组件中
<template>
<div>
{{ name }}
</div>
</template> <script>
export default {
props: {
name: {
type: String,
default: 'apple'
}
}
}
</script>
<style lang="less" scoped> </style>{
path: '/argu/:name',
component: () => import('@/views/argu.vue'),
props: true
}这样随着不同的url里的参数录入，组件都会展示对应的参数数据
- 第二种传参方式为：对象模式，这种模式适用于普通传统的路由类型，没有参数，实现思路为，直接在组件里定义一个属性，然后路由列表中定义一个路由对象的属性值，默认情况下取的是组件里的默认值，存在各个路由对象下则取对应路由对象的属性值：
<template>
<div class="about">
<h1>This is an about page</h1>
<d>
{{ food }}
</d>
</div>
</template>
<script>
export default {
props: {
food: {
type: String,
default: 'apple'
}
}
}
</script>
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
props: {
food: 'banana'
}
}
- 第三种传参方式为：函数模式，适合于在传入的属性中，能够根据当前的路由，来做一些处理逻辑，从而设置传入组件的属性值，就是如果URL+参数，实现传递不同的内容给组件，实现逻辑：路由列表中以函数方式同等属性名（food）来获取当前路由实例的指定属性的值：route.query.food，然后组件中定义同名属性以承接路由列表传递的属性值，然后供业务逻辑处理呈现
{
path: '/',
name: 'home',
alias: '/home_page',
component: Home,
props: route => ({
food: route.query.food
})
}
props: {
food: {
type: String,
default: 'apple'
}
}