Najlepsza praktyka reagowania na zmiany parametrów za pomocą routera Vue

Question

Podczas korzystania z routera Vue z trasami takimi jak /foo/:val należy dodać obserwatora do react for parameter changes. Powoduje to nieco irytujący duplikat we wszystkich widokach, które mają parametry w adresie URL.

To może wyglądać jak w poniższym przykładzie:

export default { 
    // [...] 
    created() { 
     doSomething.call(this); 
    }, 
    watch: { 
     '$route'() { 
      doSomething.call(this); 
     } 
    }, 
} 

function doSomething() { 
    // e.g. request API, assign view properties, ... 
} 

Czy jest jakiś inny sposób na pokonanie tego? Czy moduły obsługi dla połączeń created i $route mogą być łączone? Czy ponowne użycie komponentu może zostać wyłączone, aby obserwator nie był w ogóle potrzebny? Używam Vue 2, ale może to być interesujące także dla Vue 1.

Answer 1

Jedna z możliwych odpowiedzi, którą znalazłem dzięki GitHub issue jest następująca.

Możliwe jest użycie key attribute, który jest również używany do v-for, aby umożliwić Vue śledzenie zmian w widoku. Do tego, aby pracować, trzeba dodać atrybut do elementu router-view:

<router-view :key="$route.fullPath"></router-view> 

Po dodaniu to do widzenia, nie trzeba oglądać $route więcej. Zamiast tego Vue.js utworzy zupełnie nową instancję komponentu, a także wywoła oddzwanianie created.

Jest to jednak rozwiązanie typu "wszystko albo nic". Wydaje się, że działa dobrze na małej aplikacji, którą obecnie rozwijam. Ale może to mieć wpływ na wydajność w innej aplikacji. Jeśli naprawdę chcesz wyłączyć ponowne użycie widoku tylko dla niektórych tras, możesz rzucić okiem na ustawienie wartości key o wartości based on the route. Ale nie podoba mi się to podejście.