Vue-router关于props属性的配置

Vue对于route配置的时候可以选择配置props属性

1.单个路由组件中使用,即没有命名视图

route = [
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/test.vue'),
    props: true
  },
....
]

配置后需要在对应路由组件中声明传递的props才能获取到,如果未进行声明是不可获取的。对应的动态路由传参和params传参皆可。我使用query传参是获取不到,不知道是不是姿势不对。

2.多个路由组件中使用,即命名视图

route = [
  {
    path: '/test',
    name: 'test',
    components: {
      default: () => import('@/views/test.vue')
    },
    props: {
      default: true
    }
  }
...
]

如果是适应components不管是否有命名视图的其他路由视图,都必须将props写成上述方式(router-view没有name属性),否则是匹配不到的。多个配置就算将路由视图的出口name属性和props的键值对应即可。


关于作者

xlynn
获得点赞
文章被阅读