Vue-admin工作整理(四):路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过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'
}
}