Thực hành tốt nhất để phản ứng với Params Thay đổi với Bộ định tuyến Vue

Question

Khi sử dụng Bộ định tuyến Vue với các tuyến đường như /foo/:val, bạn phải thêm người theo dõi react for parameter changes. Điều đó dẫn đến mã trùng lặp hơi khó chịu trong tất cả các chế độ xem có tham số trong URL.

Điều này có thể trông giống như ví dụ sau:

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

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

Có cách nào khác để khắc phục điều đó? Các trình xử lý có thể được kết hợp với các thay đổi created và $route không? Việc sử dụng lại thành phần có thể bị vô hiệu hóa để người quan sát có cần thiết không? Tôi đang sử dụng Vue 2, nhưng điều này có thể là thú vị cho Vue 1, quá.

Answer 1

Một câu trả lời có thể có mà tôi vừa tìm được nhờ một số GitHub issue là như sau.

Có thể sử dụng key attribute cũng được sử dụng cho v-for để cho phép Vue theo dõi các thay đổi trong chế độ xem. Cho rằng để làm việc, bạn phải thêm các thuộc tính đến yếu tố router-view:

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

Sau khi bạn thêm này để xem, bạn không cần phải xem $route nữa. Thay vào đó, Vue.js sẽ tạo ra một thể hiện hoàn toàn mới của thành phần và cũng gọi hàm callback created.

Tuy nhiên, đây là giải pháp hoàn toàn không có gì. Dường như nó hoạt động tốt trên ứng dụng nhỏ mà tôi hiện đang phát triển. Nhưng nó có thể có tác động đến hiệu suất trong một ứng dụng khác. Nếu bạn thực sự muốn vô hiệu hóa việc sử dụng lại chế độ xem cho một số tuyến đường, bạn có thể xem cài đặt giá trị keybased on the route. Nhưng tôi không thực sự thích cách tiếp cận đó.