Vue Router动态路由中组件props为何为undefined？

嘿，我之前也踩过这个版本的坑！问题出在你用的Vue Router@2.0.0上——这个版本里props: true的规则和后来的新版本不一样，它只对命名视图生效，普通的单组件路由没法直接通过props: true把路由参数映射成组件props。

为什么会这样？ #

Vue Router是从2.2.0版本开始，才支持对普通路由使用props: true来自动把$route.params映射为组件props的。在2.0.0这个早期版本里，这个特性还没实现，所以你设置props: true根本不会生效，组件的name自然就是undefined了。不过$route.params不受影响，所以你能在控制台看到正确的值。

快速解决方案 #

不用升级版本的话，把路由配置改成函数式props就能解决问题：

// 修改routes里的User路由配置
{ 
  path: '/user/:name', 
  component: User, 
  props: (route) => ({ name: route.params.name }) 
}

这个函数会接收当前路由对象作为参数，你可以手动把route.params.name映射到组件的nameprops上。这样修改后，你的User组件就能正常拿到name值，点击Check按钮时，this.name就会输出正确的John了。

另一个可选方案：升级版本 #

如果你能把Vue Router升级到2.2.0及以上版本，那原来的props: true写法就可以正常工作了，不需要修改路由配置。不过如果项目依赖不能升级，函数式props就是最稳妥的办法。

内容的提问来源于stack exchange，提问作者TheNewGuy