vue.js 同じurlに移動する

同じurl。
/article/333/ から /article/777/ に移動する場合。

これが同じ article だとうまく画面が切り替わらない。

そんなときの対応

hoge.vue

<router-link :to="{ path: '/article/777/'}">
   次のページへ
</router-link>

//略


beforeRouteUpdate (to, from, next) {

    this.nextId = to.params.id;//333
    this.getArticle();
    next();//必須 これを読み出さないと、urlが変わらない

},


//略


getArticle(){

    let dataform = new FormData();

    //現在のアドレスバーから 記事 IDを取得
    var id = this.$route.params.id;

    //次のIDが空じゃなければ
    if(this.nextId != ''){
        id = this.nextId;
    }

    dataform.append('id',id);
    axios.post('/article/view/', dataform).then(e => {

    }).catch((error) => {

        console.log(error);

    });


},

これで url もデータも切り替わる。

component の場合は？

親メソッドで v-if で制御

<articlenote-component :social_id="this.res.social.id" v-if="this.res.social.id"></articlenote-component>

beforeRouteUpdate (to, from, next) {


var tmp = this.res.social.id;
this.res.social.id = '';
next();//必須 これを読み出さないと、urlが変わらない

},