vue-routerで遷移した際、再描写を行いたい

Question

##やりたいこと
画面Aに2つのボタンがあり、押したボタンのIDを画面Bに渡します。
画面BではIDを取得し、v-ifで描写するエリアを決めます。

##現在起こっている問題
画面Bに遷移した際v-ifが反応しません。画面BでF5を押し更新した場合、v-ifが反応して描画されます。

##試したこと
https://qiita.com/computer-penguin/items/658696b27ac57f977d88
https://qiita.com/naoiwata/items/d0ed1f7c2b2718dc94c3
こちらを参考に<script>にbeforeRouteUpdateを実装しようと試してみましたが、
beforeRouteUpdateの書き方が分からず上手くいきませんでした。

##ソースコード
####A画面

<template>
    <div class="container">
        <h1>メニュー</h1>
        <td>
            <router-link v-bind:to="{name: 'no.select', params: {taskId: 1}}">
                <a class="btn-square">1. A処理</a>
            </router-link>
        </td><p>
        <td>
            <router-link v-bind:to="{name: 'no.select', params: {taskId: 2}}">
                <a class="btn-square">2. B処理</a>
            </router-link>
        </td>
    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
</style>

####B画面

<template>
    <div class="container">
        <h1>コード入力</h1>
        <h2>
            <p>[ 01 ~ 20 ]</p>
            <p>コードを入力</p>
        </h2>
        <input @input="validate" v-model="numValue">
        <p>
        <td>
        <div v-if="this.$route.params.taskId==='1'">
            <router-link v-bind:to="{name: 'A.select', params: {taskId: 1}}">
                <a class="btn-square">A処理入力画面へ進む</a>
            </router-link>
        </div>
        <div v-else-if="this.$route.params.taskId==='2'">
            <router-link v-bind:to="{name: 'B.select', params: {taskId: 1}}">
                <a class="btn-square">B処理入力画面へ進む</a>
            </router-link>
        </div>
        <div v-else>
            想定外のアクセスです。トップページに戻ってください。
        </div>
        </td>
    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
</style>

Answer 1

自己解決しましたので記載いたします。

B.vueにbeforeRouteEnterイベントでv-ifの要素を変更することで描画します。
あまり綺麗なコードではないので参考程度にお願いします。

<template>
    <div class="container">
        <h1>コード入力</h1>
        <h2>
            <p>[ 01 ~ 20 ]</p>
            <p>コードを入力</p>
        </h2>
        <input @input="validate" v-model="numValue">
        <p>
        <td>
        <div v-if=view1>
            <router-link v-bind:to="{name: 'A.select', params: {taskId: 1}}">
                <a class="btn-square">A処理入力画面へ進む</a>
            </router-link>
        </div>
        <div v-if=view2>
            <router-link v-bind:to="{name: 'B.select', params: {taskId: 1}}">
                <a class="btn-square">B処理入力画面へ進む</a>
            </router-link>
        </div>
        <div v-if=view3>
            想定外のアクセスです。トップページに戻ってください。
        </div>
        </td>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                view1:false,
                view2:false,
                view3:true
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                vm.initialize();// 画面が表示された時の処理を呼び出します。
                next();
            });
        },
        methods: {
            /** 初期化(最初にコンポーネントが読まれる時、ページ全体を更新する時に呼ぶ) */
            initialize() {
                this.view1 = false;
                this.view2 = false;
                this.view3 = false;
                if(this.$route.params.taskId==='1'){
                    this.view1 = true;
                }else if (this.$route.params.taskId==='2'){
                    this.view2 = true;
                }else{
                    this.view3 = true;
                }
            },
        }
    }
</script>

<style scoped>
</style>

Answer 2

こっちの方の情報を参考に作成された方がいいと思います。

Vue-router を使ったときに URL は変わったのに画面に反映されないとき

時間がないので検証はしてないですが、こういう流れになっているようです。

a.vue(親コンポーネント　A）

}
 beforeRouteUpdate (to, from, next) {
    // URL の id が変わったときに src/components/b.vue の b_hoge関数を実行してモデルを更新する
    this.$refs.items.b_hoge(); //子コンポーネントの受取メソッド
    next(); //次のフックに移動するメソッド
  }
}

b.vue（子コンポーネント　B）

/*@props制御も忘れないように*/
methods{
    b_hoge(){
        return getCurrentItem(this.$route.params.to); //親コンポーネントから取得したv-bindディレクティブ
    }
}

これを、今回のv-bind:to={…}に受け渡そうとしているオブジェクトに当てはめてみればいけるのではないかと。

Comments

[shimeji_XX]

回答ありがとうございます。
a.vueで<v-bind:to={...}>のリンクをクリックしたときにbeforeRouteUpdateが発火するという認識でよろしいでしょうか？
初心者過ぎて変なことを言っていたら申し訳ございません。
beforeRouteUpdateの中にconsole.logを入れてみたのですが、出力されず、beforeRouteUpdateがどのタイミングで動作するのか分かっていません。

[shimeji_XX]

色々検証してみてやっと分かりました。
提案された方法は#~~~が変わる実装なのでbeforeRouteUpdateが動くということが分かりました。
/aaaから/bbbに遷移した際はbeforeRouteUpdateは動きません。
引き続き情報を募集いたします。