动态路由传参

为什么有路由组件传参

如果用$route的方法，会导致它与对应的路由有高度的耦合（也就是说，$route的组件传参方法也行，就是与组件的耦合度会高），耦合度高使得组件只能在某些特定的URL上使用，限制了其灵活性。

如何解决$route耦合度高的问题

路由组件传参

路由组件传参能干什么

获取路由参数，在页面中做一些逻辑处理

vue路由组件传参有三种方式：

• 1、布尔方式
• 2、对象方式
• 3、函数方式

1、布尔方式

布尔方式适用于有动态路由参数的情况

举个栗子：

router:
{
  path: '/argu/:name',  // 动态参数
  name: 'argu',         // 命名路由
  component: ()=>import('@/views/Argu.vue'),  // 懒加载组件，用到再加载
  props: true,          // 路由传参，会将name传递过去
}

component:
<template>
  <div>
    <!-- 获取动态参数的方法之一：耦合度高 -->
    {{ $route.params.name }}
    <!-- 获取动态参数的方法之二：耦合度低 -->
    {{ name }}
  </div>
</template>
<script>
export default {
  // 动态路由传参
  props: {
    name: {
      type: [String,Number],
      default: 'xiaoming'
    }
  }

}
</script>

test:
http://localhost:8080/#/argu/aaa

将props设置为true，route.params将会设置为组件属性

2、对象方式

对象方式适合普通路由传参的情况

router:
{
  path: '/about',
  name: 'about',
  component: () => import('@/views/About.vue'),
  // 对象方式传参
  props: {
    food: "apple"
  }
}

component:
{{ food }}
props: {
  food: {
    type: String,
    default: 'babana'
  }
}
</script>

test:
http://localhost:8080/#/about

3、函数方式

创建一个函数，返回props

router:
{
  path: '/',
  name: "home",
  alias: 'home_page',
  component: Home,
  props: route=>({
    food: route.query.food
  })
},

component:
{{ food }}
props: {
  food: {
    type: String,
    default: "orange"
  }
},

test:
http://localhost:8080/#/?food=orr