Vue.js: Przypisywanie tytułu strony do różnych tras

Question

Buduję aplikację internetową za pomocą vue.js v1.0, vue-router v0.7 i WebPack. Podążam za wzorcem Single File Component i mam różne komponenty dla każdej strony.

Nie wiem, jak zmienić tytuł strony w różnych trasach (a może w różnych komponentach) podczas nawigacji po stronach aplikacji internetowych. Chcę też, aby tytuły stron były dostępne w historii przeglądarki.

Answer 1

miałem również ten sam problem kilka dni temu, a ja co następuje w mojej definicji składnika trasy:

export default { 
    created: function() { 
     window.document.title = "Page Title for this route" 
     ... 
    }, 
    ... 
} 

To naprawdę nie jest poprawny sposób to zrobić. Powód: Rozumiem, że komponent trasy jest tworzony za każdym razem po zmianie na nową. To prawda, że ​​na razie jest to vue-router, ale może się zmienić w przyszłości.

Używałem wcześniej ui-router w Angular 1.4, który pozwala komponentom trasy żyć w pamięci (stanach lepkich), dzięki czemu zmiana trasy jest natychmiastowa następnym razem. Jeśli vue-router kiedykolwiek zaimplementuje coś podobnego do stanów lepkich, powyższa metoda ustawiania tytułu w haczyku created zakończy się niepowodzeniem.

Ale do tego czasu możesz użyć tego rozwiązania.

Answer 2

W uzupełnieniu do mojego wcześniejszego rozwiązania zamieszczonych tu jest drugi sposób, że znalazłem po trochę badań: użyj Navigation Guards

jak wyszczególniono w mojej poprzedniej odpowiedzi, tutaj jest problem: vue-router może rozpocząć Ponowne użycie komponentów trasy po utworzeniu po raz pierwszy. Naprawdę nie ma potrzeby niszczenia tych komponentów po wyjściu z trasy i ponownego tworzenia po kolejnym wprowadzeniu trasy. Dlatego hak created w moim wcześniejszym rozwiązaniu może nie być uruchamiany podczas kolejnych wizyt na tej samej trasie. Dlatego nasz tytuł okna może nie działać zgodnie z oczekiwaniami.

Aby rozwiązać ten problem, możemy ustawić tytuł okna na wydarzeniu zmiany trasy. Instancja routera ma hak afterEach, który jest wywoływany po zmianie trasy. Może być używany do ustawiania tytuł okna, jak opisano poniżej:

// Let's say this is your router instance, with all "Named Routes" 
const ROUTER_INSTANCE = new VueRouter({ 
    mode: "history", 
    routes: [ 
     { path: "/", name: "HomeComponentName", component: HomeComponent }, 
     { path: "/about", name: "AboutComponentName", component: AboutComponent }, 
     { path: "*", name: "RouteErrorName", component: RouteError } 
    ] 
}) 

// Assign page titles for each of the "named routes" 
// Reason: This allows us to have short named routes, with descriptive title 
const PAGE_TITLE = { 
    "HomeComponentName": "Your Dashboard", 
    "AboutComponentName": "About Us Page", 
    "RouteErrorName": "Error: Page not found" 
} 

ROUTER_INSTANCE.afterEach((toRoute, fromRoute) => { 
    window.document.title = PAGE_TITLE[toRoute.name] 
    console.log(toRoute) // this lets you check what else is available to you here 
}) 

to nadal nie może pomóc, jeśli są nawigowania pomiędzy podobnymi drogami, jak „/ user/foo” do „/ user/bar”. Jeśli chcesz podać nazwę użytkownika na pasku tytułowym lub niektóre informacje o dynamicznej stronie, sprawdź: Reagowanie na zmiany parametrów zgodnie z opisem w . Na podstawie Dokumentów, powinniśmy być w stanie używać watch w składniku następująco:

watch: { 
    '$route' (toRoute, fromRoute) { 
     window.document.title = "some page title" 
    } 
} 

Nadzieję, że to pomaga!

Answer 3

Mam rozwiązanie i użyłem go na jednym moim projects.

Najpierw utwórz dyrektywę.

Vue.directive('title', { 
    inserted: (el, binding) => document.title = binding.value, 
    update: (el, binding) => document.title = binding.value 
}) 

Załóżmy, że pracujemy nad plikiem 'MyComponent.vue'.

Następnie użyj tej dyrektywy na komponencie router-view.

Działa to nawet w przypadku aktualizacji komponentu lub przeładowania strony.

Sprawdziło się bardzo dobrze dla mnie !!