vue.js+vue-routerで認証後、遷移(画面書き換え)するベストプラクティス

Question

vue.js+vue-routerでrouter-pushを使うと、マッチしたパスに相当するコンポーネントを<router-view>でマウントできる(描画できる)と思います。
即ちこれは例えばログイン画面があり、認証成功後usersページを表示したい場合、以下のようなDOMになっていたとすると、画面全体が対象コンポーネントに置き換わるのではなく認証成功後ログイン画面の下に、usersページが表示されるのみであると思います。

<template>
    <div>
        <div id="login">
            <el-form>
                <el-form-item label="メールアドレス" prop="email">
                    <el-input id="email" type="email" v-model="email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="パスワード" prop="password">
                    <el-input id="password" type="password" v-model="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit" >ログイン</el-button>
            </el-form>
            <router-view></router-view> ⭐️<!--ここ-->
        </div>
    </div>
</template>
<script>
//省略...ログインするための処理と、認証後ユーザーページにrouter.pushする処理を記載
</script>

以上を踏まえてとなるのですが認証後画面全体を書き換えたいとすると、どのような処理を挟むべきなのがベストなのでしょうか？(例えば認証後usersページを表示する前に、ログイン画面をdisableにする)
ベストプラクティスが分からず質問いたしました。よろしくお願いします。

Answer 1

一応v-ifを使って書き換えましたがこれで大丈夫なのかは不明というステータスです。