Vue-router chuyển hướng trên trang không tìm thấy (404)

Question

Tôi đang cố gắng để chuyển hướng đến 404.html trên trang không tìm thấy bằng cách sử dụng móc toàn cầu router.beforeEach, mà không có nhiều thành công (sử dụng Vue và Vue-Router 1.0):

router.beforeEach(function (transition) { 
    if (transition.to.path === '/*') { 
     window.location.href = '/404.html' 
    } else { 
     transition.next() 
    } 
}); 

Điều này không chuyển hướng đến trang 404.html khi một tuyến đường không tồn tại được chèn vào, chỉ cần cho tôi một đoạn trống. Chỉ khi hard-coding some-site.com/* nó sẽ chuyển hướng đến một số trang web mong đợi some-site.com/404.html

Tôi chắc chắn có điều gì đó rất rõ ràng ở đây mà tôi đang xem, nhưng tôi không thể hình dung ra cái gì.

---

Xin lưu ý rằng những gì tôi đang tìm kiếm là một chuyển hướng đến một trang mới, không phải là một chuyển hướng sang một con đường, mà có thể dễ dàng đạt được bằng cách sử dụng router.redirect chẳng hạn như trong những đoạn:

router.redirect({ 
    '*': '404' 
}) 

trong khi trên router.map của tôi, tôi có thể có những điều sau đây:

router.map({ 
    '/404': { 
     name: '404' 
     component: { 
      template: '<p>Page Not Found</p>' 
     } 
    } 
}) 

Answer 1

Tôi nghĩ rằng bạn sẽ có thể sử dụng một handler tuyến đường mặc định và chuyển hướng từ đó đến một trang bên ngoài ứng dụng, như chi tiết dưới đây:

const ROUTER_INSTANCE = new VueRouter({ 
    mode: "history", 
    routes: [ 
     { path: "/", component: HomeComponent }, 
     // ... other routes ... 
     // and finally the default route, when none of the above matches: 
     { path: "*", component: PageNotFound } 
    ] 
}) 

Ở phía trên PageNotFound định nghĩa thành phần, bạn có thể chỉ định chuyển hướng thực tế, mà sẽ đưa bạn ra khỏi toàn bộ ứng dụng:

Vue.component("page-not-found", { 
    template: "", 
    created: function() { 
     // Redirect outside the app using plain old javascript 
     window.location.href = "/my-new-404-page.html"; 
    } 
} 

bạn có thể làm điều đó hoặc created móc như trình bày ở trên, hoặc mounted móc cũng có.

Xin lưu ý:

1. tôi vẫn chưa xác minh ở trên. Bạn cần tạo phiên bản sản xuất của ứng dụng, đảm bảo rằng chuyển hướng trên xảy ra. Bạn không thể kiểm tra điều này trong vue-cli vì nó yêu cầu xử lý phía máy chủ.

2. Thường trong các ứng dụng một trang, máy chủ gửi cùng một index.html cùng với tập lệnh ứng dụng cho tất cả các yêu cầu tuyến đường, đặc biệt nếu bạn đã đặt <base href="/">. Điều này sẽ không thành công cho /404-page.html của bạn trừ khi máy chủ xử lý nó như một trường hợp đặc biệt và phục vụ trang tĩnh.

Hãy cho tôi biết nếu nó hoạt động!