Vue.js: Gán tiêu đề trang cho các tuyến khác nhau

Question

Tôi đang xây dựng một ứng dụng web bằng cách sử dụng vue.js v1.0, vue-router v0.7 và WebPack. Tôi đang theo dõi Single File Component mẫu và có các thành phần khác nhau cho mỗi trang.

Tôi không biết làm thế nào tôi có thể thay đổi tiêu đề trang trong các định tuyến khác nhau (hoặc có thể các thành phần khác nhau) khi tôi điều hướng qua các trang ứng dụng web. Tôi cũng muốn tiêu đề trang có sẵn trong lịch sử trình duyệt.

Answer 1

Tôi cũng có cùng một vấn đề vài ngày trước, và tôi giải quyết như sau trong định nghĩa thành phần đường của tôi:

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

Đó thực sự không phải là cách đúng để làm việc đó. Lý do: Tôi giả định rằng thành phần tuyến được tạo mọi lúc khi thay đổi sang tuyến mới. Nó là đúng trong vue-router cho bây giờ, nhưng có thể thay đổi trong tương lai.

Tôi đã sử dụng ui-router trong Angular 1.4 trước đó, cho phép thành phần tuyến đường để sống trong bộ nhớ (trạng thái dính), để thay đổi tuyến đường tức thời vào lần tiếp theo. Nếu vue-router từng thực hiện một cái gì đó tương tự như trạng thái dính, tiêu đề cài đặt ở trên của tôi trong móc created sẽ không thành công.

Nhưng cho đến khi điều đó xảy ra, bạn có thể sử dụng giải pháp này.

Answer 2

Ngoài giải pháp trước đó của tôi được đăng ở đây, có một phương pháp thứ hai mà tôi tìm thấy sau một chút nghiên cứu: sử dụng Navigation Guards

Như chi tiết trong câu trả lời trước đây của tôi, đây là vấn đề: vue-router có thể bắt đầu sử dụng lại thành phần tuyến đường sau khi được tạo lần đầu tiên. Có thực sự không cần phải phá hủy các thành phần này trên tuyến đường, và tái tạo trên tuyến đường tiếp theo. Do đó móc created trong giải pháp trước đó của tôi có thể không kích hoạt trong các lần truy cập tiếp theo trên cùng một tuyến đường. Vì vậy, tiêu đề cửa sổ của chúng tôi có thể không hoạt động như mong đợi.

Để khắc phục sự cố đó, chúng tôi có thể đặt tiêu đề cửa sổ trên sự kiện thay đổi tuyến đường. Ví dụ về bộ định tuyến có móc afterEach được gọi sau khi thay đổi tuyến đường. Điều này có thể được sử dụng để thiết lập tiêu đề cửa sổ như chi tiết dưới đây:

// 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 
}) 

này vẫn có thể không giúp bạn nếu bạn đang điều hướng giữa các tuyến đường tương tự, như "/ user/foo" thành "/ user/bar". Nếu bạn muốn tên người dùng trong thanh tiêu đề hoặc một số thông tin cụ thể của trang động, hãy xem Phản ứng với các Thay đổi Params như được mô tả chi tiết trong http://router.vuejs.org/en/essentials/dynamic-matching.html. Dựa trên tài liệu, chúng tôi có thể sử dụng watch trong thành phần như sau:

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

Hy vọng điều đó sẽ hữu ích!

Answer 3

Tôi đã có giải pháp và sử dụng nó trên một số projects của mình.

Trước tiên hãy tạo chỉ thị.

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

Giả sử, chúng tôi đang làm việc trên 'MyComponent.vue' tệp.

Sau đó, sử dụng chỉ thị đó trên thành phần router-view.

<router-view v-title="title" ></router-view> 

export default { 
    data(){ 
    return { 
     title: 'This will be the title' 
    } 
    } 
} 

Điều này hoạt động ngay cả khi thành phần được cập nhật hoặc trang được tải lại.

Làm việc rất tốt cho tôi !!