Vue路由：如何将查询参数绑定到命名路由视图？函数式props失效

我明白你遇到的困扰了——当使用命名路由视图时，直接在路由根层级写函数式props并不会作用到指定的命名视图上，这个写法默认是给默认视图（无命名的视图）配置的。咱们调整一下路由配置的写法就能解决：

修改后的路由配置 #

path: '/register',
name: 'Register',
components: {
  loginView: () => import(/* webpackChunkName: "register" */ '../views/Register.vue'),
},
meta: { guest: true },
// 关键：针对每个命名视图单独配置props
props: {
  loginView: route => ({ 
    email: route.query.email, 
    token: route.query.token 
  })
}

为什么这样能生效？ #

• 当路由配置包含多个命名视图时，props需要是一个键值对对象，其中每个键对应你在components里定义的视图名称（这里就是loginView）。
• 给对应视图指定的函数式props可以正常接收route对象，你就能轻松把query参数映射成组件的props了。
• 之后你的Register.vue组件只需要声明对应的props即可：

<script>
export default {
  props: ['email', 'token'],
  // ...其他业务逻辑
}
</script>

这样一来，当你访问/register?email=user@example.com&token=abc123时，组件里的email和token就会被自动赋值为对应的查询参数，不用再手动从$route.query里读取啦。

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