同じコンポーネントでページ遷移するときはbeforeRouteUpdate

#概要
コンポーネントA(/mypage/1)→コンポーネントA(/mypage/2)にページ遷移する場合に、
再描画されなくて困っていたのですが、beforeRouteUpdateを使うことで解決できました。

#実装
公式を参考に実装しました。
公式サイト

##使い方

.js

beforeRouteUpdate (to, from, next) {
  // `this` を使用
  this.name = to.params.name
  next()
}

to:ページ遷移先の情報
from:現在のルート情報

##toの中身を見てみる

.js

beforeRouteUpdate (to, from, next) {
  console.log(to)
}

//結果
fullPath: "/mypage/2"
hash: ""
matched: Array(2)
  ...
params:
    userId: 2
path: "/mypage/2"

今回はparamsが変更された場合に遷移したいので、params.userIdを使用してページ遷移を実現します。

##Vue

.vue

<script>
export default{
  props: {
    userId: String //ユーザーID
  },
  mounted() {
    this.$store.dispatch('page/getUser', this.userId)
  },
  beforeRouteUpdate(to, from, next){
    const name = to.params.userId
    this.$store.dispatch('page/getUser', name)
    next()
  }
}
</script>

beforeRouteUpdate
to.params.userIdが変更されるごとに、

this.$store.dispatch('page/getUser', name)

が呼び出され、

next()

でページの遷移を行います。

##Store

store/page.js

const state = {
  data: '',
}
const getters = {
  data: state => state.data ? state.data : '',
}
const mutations = {
  setData(state, data){
    state.data = data
  },
}
const actions ={
  async getUser({commit}, user_id) {
    await axios.get('/api/user', {
      params: {
        user_id: user_id
      }
    }).then(res=>{
      commit('setData', res.data)
    }) 
  },
}
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

ユーザー情報を取得するだけのAPIになっています。

#参考文献
Vue Routerでのページネーションライフサイクル