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

我现在没有显示来自组件的数据，而是通过执行以下操作，将未经

授权的用户发送到
/account
登录：

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

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

基本上，我想在用户被授权时显示数据，或者在用户未被授权时重定向数据，或者以后变得未经授权。
首先，您不需要在模板中使用
此

如果您想根据
授权的
值对其进行路由，您可能需要使用一个

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

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

这比我想象的要简单。我相信答案是肯定的。跨度可以简单地更改为：




它甚至更简单，因为它只有一行
即使在
mounted（）
已经启动并且
authorized
变为
false
实际上，我现在可以删除
mounted（）
（干式原理）中的类似逻辑
编辑：

经过适当的测试后，我发现它实际上不适用于我的第一个
@load
事件示例。
虽然我没有尝试您建议的方式，但您可能希望在
路由之前
钩子中执行此逻辑，以避免在未授权的情况下出现任何UI“闪烁”。我最初的回答是胡说八道。我没有正确地测试，但我很接近。更新答案以反映当前解决方案。为什么要使用
$router。在
：类中推送
。只需使用watcher，watcher将占用更多的代码行，并且不会自然地遵循
v-if=“authorized”
。我的意思是，如果你已经有了v-if=“authorized”，那么为什么要离开这个范式，放弃v-else的目的呢？如果是v-if=“authorized”，如果不是，则有一个观察者，这是针对同一变量不同方面的两种不同解决方案。这似乎很愚蠢。问题是会话可能会过期，然后
authorized
变为false，并且
mounted（）
早就启动了。不过，观察者看起来很有趣。谢谢你的提示。如何确定课程？不是通过向服务器发送一些东西来检查他们是否仍然拥有有效的会话吗？不是，我正在后台运行async SSE东西，在那里我可以检测到用户的授权已被删除。但是如果，比如说，我失去internet连接，会话过期，会发生什么？不同的问题。我已经有了一个SSE检查器来处理无连接问题。这个问题与连接状态无关。
async mounted ()
{
    const authorized = await fetch("something")
    if (!authorized)
    {
        this.$router.push('/account')
    }
}

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