vue.jsの動的ルーターリンクが動作しない

Question

私は私の髪の最後の鎖を引っ張っています。私は何を逃していますか？

各リンクは、クリックするとアドレスバーに正しく表示されますが、ページが読み込まれていないか、ルーティングされていません。その後、リフレッシュすると正しいページが表示されます。

[ルート] '

import eachPost from './components/eachPost.vue'; 
{ path: '/eachPost/:id', component: eachPost } 

[成分]

<router-link :to="'/eachPost/' + post.p_id" v-for="(post,i) in posts" 
:key="i" exact>{{ post.header }}</router-link> 

`

ルータのリンクのリストをeachPost.vue iselfを含むすべてのコンポーネント上に表示されます。このページは、他のコンポーネントからクリックされたときにのみルーティングされますが、eachPost.vueコンポーネントからはルーティングされません。

Answer 1

OK、あなたの問題を理解していると思います。 paramの変更のルートを見る必要があります（Vueの最も直感的な機能ではありません）。だから、あなたがする必要がある、あなたの基本コンポーネントで：

watch: { 
    '$route' (to, from) { 
    // Whatever you need to change route 
    } 
} 

同じ方法であることが必要であることを、ここに事は、コンポーネントが再描画されないということですので、あなたが要素を作成するときには、データをフェッチしている場合ルートが変更されたときに呼び出されます。ここでは基本的な例です：

{ 
    template: '<div>{{message}}</div>', 
    created() { 
    this.setMessage(); 
    }, 
    methods:{ 
    setMessage(){ 
     this.message = 'Bar ' + this.$route.params.id; 
    } 
    }, 
    watch: { 
    '$route' (to, from) { 
     this.setMessage(); 
    } 
    }, 
    data() { 
    return { 
     message: '' 
    } 
    } 
} 

私はルート変更は、あなたがこのJSFiddleにこの動作を確認することができたときに、メッセージを変更している、ここでやっているすべて：https://jsfiddle.net/unrm8tcL/

Answer 2

あなたがダイナミックルートを使用する場合は、同じコンポーネントが再利用されます。ここで

はcraig_hの答えに追加するための基準である：のparamsでルートを使用すると、そのときのユーザであるときに注意することのparamsの変更

一つのことに反応部で https://router.vuejs.org/en/essentials/dynamic-matching.html

外観/ user/fooから/ user/barにナビゲートすると、同じコンポーネントインスタンスが再利用されます。両方のルートが同じコンポーネントをレンダリングするので、これは古いインスタンスを破棄して新しいインスタンスを作成するよりも効率的です。ただし、コンポーネントのライフサイクルフックは呼び出されません。同じコンポーネント内のparamsの変化に反応するように

、あなたは単に$ルートオブジェクトを見ることができます：あなたはページでは、eachPostページにあるときにリフレッシュし、クリックしないことを

const User = { 
    template: '...', 
    watch: { 
    '$route' (to, from) { 
     // react to route changes... 
    } 
    } 
}