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

好的，我想我明白你的問題。你需要觀察參數變化的路徑（不是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的參考答案： https://router.vuejs.org/en/essentials/dynamic-matching.html

看看反應到PARAMS變化

一件事用使用參數路由時要注意部分的是，當用戶從/ user/foo導航到/ user/bar，相同的組件實例將被重用。由於兩個路由都呈現相同的組件，因此這比破壞舊實例並創建新實例更高效。但是，這也意味着組件的生命週期鉤子將不會被調用。

作出反應PARAMS在同一組件的變化，你可以簡單地看$路由對象：

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