Vue：将道具从路由器传递到可变组件

Question

我想使用相同的基本页面登录和注册子组件。

想法：将“登录”或“创建帐户”从路由器传递到AuthPage.vue

在那里，通过<component :is>

显示相应的组件

router.js

routes: [
    // ...
    { name: 'login',                path: '/login', component: AuthPage, props: { subPage: 'login' } },
    { name: 'create-account',       path: '/create-account', component: AuthPage, props: { subPage: 'create' } },
    // ...
]

Authpage.vue

<template>
    <keep-alive>
        <component :is="toggleAuthPage"></component>
    </keep-alive>
</template>


<script>
  import CreateAccount             from 'Components/auth/CreateAccount'
  import Login                from 'Components/auth/Login'

  export default {
    props: {
      subPage: {
        default: 'login',
        type: String,
      },
    },
    data: () => ({
      toggleAuthPage: this.subPage,
    }),
    components: {
      Login,
      CreateAccount,
    },
  }
</script>

问题

它不起作用。 如果我在/ login上导航，Vue检查器会告诉我

props
  subPage: "login" 
data
  toggleAuthPage: undefined

那是为什么？我不明白this.subPage是否应该工作正常？我该如何解决？ 如果我输入数据：toggleAuthPage: 'login'，它就像一个超级字符