同componentを再利用する際にデータが再setされない問題について

Question

例えばuser一覧を表示する際に/user/allというurlを使用し、user.vueというcomponentで一覧を表示するとします。このcomponentは、/user/1とか/user/2といった各個人の情報を表示するケースでも再利用したいので、urlが変わる毎に同じcomponentにデータを再セットしようと挑戦しています。しかしこれが上手くいきません。
どなたかご教示頂けないでしょうか。

watchに$routeをセットしているので、私自身はここが変わればリロードが実行されると考えていたのですが、違うのでしょうか。

// App.vue

<template>
...
  <router-view 
     keep-alive
     transition
     transition-mode="out-in">
  </router-view>
</template>

// user.vue

<template>
    ...
</template>

<script>
import user from './User.vue'
import actions from './Actions.vue'
...

export default {
    name: 'users',
    components: {
       user,
       actions,
    },
    data: function() {
        return {
            userList : [],
            url : {}
        }
    },
    created() {
        get(`/api/user/all`){
            //
        }
    },
    watch: {
        '$route' (to, from) {
            this.getContents()
        }
    },
    methods: {
        getContents() {
            get(this.url)
                .then((res) => {
                    //
                })
                .catch((err) => {
                    //
                })
        }
}
</script>

Answer 1

ユーザー一覧と単体ユーザー情報なら、別のデータや別のコンポーネントにする方がいいです。

created と watch を使っても結果を両方 user に入れていまうと以下のような感じになります。（擬似的に遅延させてます）

https://jsfiddle.net/mio/tr6fo0wp/

コンソールをみてもらえばどういう順番になっているか分かります。
非同期なのでどちらが上書きされるか通信状況によって変わってしまいます。
あと key を設定しない限り created の一覧処理も出来ません。

https://jsfiddle.net/mio/18vovpnj/

const router = new VueRouter({
  routes: [{
    path: '/user/all',
    component: userAll
  }, {
    path: '/user/:id',
    component: user
  }]
})

通信遅延に関しては beforeRouteEnter beforeRouteUpdate やローディング用のアニメーションを活用していくといい感じになると思います。

他にもルートのネストや keep-alive などこのへんで使える機能がいろいろあるので試してみてください。

Comments

[supermaruetsu]

BAが遅くなり申し訳ありません。
勉強不足で時間がかかってしまいましたが、理解して解決に至りました。
ありがとうございました。