Question

通过显示以下内容，我目前正在路由用户登录TypeError: AsyncPolling is not a constructor（如果他们不是/account时通过authorized登录：

<template>
  <q-card v-if="authorized">
    <q-card-section>
      <DataGrid/>
    </q-card-section>
  </q-card>
  <span v-else>
    {{ this.$router.push('/account') }}
  </span>
</template>

这很简单并且可以正常工作，但是我不确定它是否正确，因为尽管它将用户推到了我想要的位置，但是控制台却收到此错误：

uncaught exception: undefined

（我目前正在使用Quasar v1.9.14）

基本上，我想显示是否已授权用户的数据，或者如果未授权则重定向用户的数据，或者稍后再授权。

Answer 1

首先，您不需要在模板中使用this。

如果您想基于authorized值进行路由，则可以使用watcher。

或者，我可能会在mounted中执行一些操作，以检查用户是否可以在那里。例如

async mounted ()
{
    const authorized = await fetch("something")
    if (!authorized)
    {
        this.$router.push('/account')
    }
}

Answer 2

它比我想象的要简单。 ~~我相信答案是事件。~~范围可以简单地更改为：

~~<span v-else @load="$router.push('/account')"/>~~

<span v-else :class="authorized ? '' : $router.push('/account')"/>

它更简单，因为它只有一个衬里
即使mounted()已被触发并且authorized成为false后，它仍然可以工作
实际上，我现在可以删除mounted()（DRY原理）中的类似逻辑

编辑：
经过适当的测试，我发现它实际上不适用于我的第一个@load事件示例。

什么是在模板中路由的最简单和正确的方法

2 个答案: