router-linkやrouter.pushし画面遷移した際に元の画面を消す方法について

Question

一部コードが長くなるため簡略させていただいております。

問題

router-linkやrouter.pushを使うことでvue-routerで定義したパスに遷移することができると思います。
しかしこれはどちらかというと遷移というより、
DOMを書き換える(router-viewタグを記載している箇所に描画)といった挙動に近いと思います。

以下のコードのようにそのままrouter.pushをした場合は遷移前の画面が残ってしまうため、v-ifディレクティブを用いてis_showというプロパティがfalseになった場合は遷移前の画面を消すという処理を記載しています。

しかしrouter-linkを使った場合、このis_showプロパティをどうやったらfalseにできるかがわかりません。
router.pushの場合はjs内で遷移前にfalseにするというコードを記載できるのですが、router-linkの場合はどうすれば良いか分からず仕舞いです。

またこのようなv-ifディレクティブを使わずとも遷移前の画面を消す良い方法があるのでしょうか？
ご回答いただけると幸いです。

コード

<template>
    <div>
        <router-link to="/sign_up">登録</router-link>
        <div id="login" v-if = "is_show">
            <el-form>
　　　　　　　　　<!-- 省略　-->
                <el-button type="primary" @click="onSubmit" >ログイン</el-button>
            </el-form>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import axios from 'axios';
export default{
    data: function() {        
        return{
　　　　　　　　　　//省略
                is_show: true
        }
    },
    methods: {
        onSubmit: function() {
            axios
                .post("http://localhost:3000/api/v1/auth/sign_in", {
　　　　　　　　　　//省略
                })
                .then((response) => {                   
                   this.is_show = false;
                   this.$router.push({ path: '/user_page' });
                })
        }
    }
}
</script>

Comments

[shinoharat]

提示されているコードはルートコンポーネントに当たると思うのですが、そこに <router-view></router-view> があるのは何故でしょうか？

Answer 1

またこのようなv-ifディレクティブを使わずとも遷移前の画面を消す良い方法があるのでしょうか？

単純に、遷移したときに消したいものはビューコンポーネントに入れてしまえば良いと思うのでですが、そうできない理由などがあるのでしょうか？
（質問者さんがどうして困っているのか、あまり理解できていません。）

質問者さんの求める回答に沿っているか分かりませんが、サンプルアプリを作成しました。

https://codesandbox.io/s/competent-lalande-1tn82?from-embed

参考になれば幸いです。
一応、サンプルアプリから一部抜粋したコードを↓にも載せます。

--

■ ルートアウトレット

ここには、画面遷移後も残したいものだけを記述します。
（共通のヘッダー・フッターなど）

  <div id="app">
    <!-- 遷移後も消したくないものだけここに書く -->
    <h1>サンプルアプリ</h1>
    <router-link to="/">Top</router-link>

    <!-- 遷移後に消したいものは router-view に描画する -->
    <router-view></router-view>
  </div>

--

■ ルーティング

ルートとビューコンポーネントをマッピングしています。
特別なことはしていません。

import Vue from "vue";
import VueRouter from "vue-router";

import Login from "./Login.vue";
import SignUp from "./SignUp.vue";
import UserPage from "./UserPage.vue";

const router = new VueRouter({
  routes: [
    { path: '/', component: Login },
    { path: '/login', component: Login },
    { path: '/sign_up', component: SignUp },
    { path: '/user_page', component: UserPage },
  ]
})

Vue.use(VueRouter);

new Vue({
  router
}).$mount("#app");

--

■ ビューコンポーネント

ログイン画面用のビューコンポーネントです。
is_show 関連のコードはすべて削除しています。
特に追加したコードはありません。

<template>
  <div>
    <p>
      ようこそサンプルアプリへ。<br>
      ここはトップページです。
    </p>

    <!-- is_show を削除 -->
    <div id="login">
      <form>
        ・・・略・・・

        <button type="button" @click="onSubmit" >ログイン</button>
      </form>
    </div>

    <p>
      または
      <router-link to="/sign_up">新規ユーザ登録</router-link>
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    onSubmit: function() {
      this.$router.push({ path: '/user_page' });
    }
  }
}
</script>