Cách chuyển hướng trang có id trong JavaScript

Sử dụng thay thế () sẽ tốt hơn vì nó không giữ trang gốc trong lịch sử phiên, nghĩa là người dùng sẽ không bị mắc kẹt trong một nút quay lại không bao giờ kết thúc

Nếu bạn muốn mô phỏng ai đó nhấp vào liên kết, hãy sử dụng cửa sổ. địa điểm. href

Nếu bạn muốn mô phỏng chuyển hướng HTTP, hãy sử dụng cửa sổ. địa điểm. thay thế

Bạn cũng có thể sử dụng phương thức gán () và thay thế để chuyển hướng javascript đến các trang khác như sau

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

2

Sự khác biệt giữa phương thức thay thế () và phương thức gán () là thay thế () xóa URL của tài liệu hiện tại khỏi lịch sử tài liệu, nghĩa là không thể sử dụng nút “quay lại” để điều hướng quay lại bản gốc . Vì vậy, hãy sử dụng phương thức gán() nếu bạn muốn tải một tài liệu mới và muốn cung cấp tùy chọn để điều hướng trở lại tài liệu gốc

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

3 là một hàm không đồng bộ mong đợi một mảng được trả về chứa các đối tượng có thuộc tính

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

4,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

5 và

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

0

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  4 là mẫu đường dẫn yêu cầu đến

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  5 là con đường bạn muốn định tuyến đến

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  0

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  4 hoặc

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  5 - nếu

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  4 sẽ sử dụng mã trạng thái 308 hướng dẫn khách hàng/công cụ tìm kiếm lưu chuyển hướng vào bộ đệm mãi mãi, nếu

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  5 sẽ sử dụng mã trạng thái 307 tạm thời và không được lưu vào bộ đệm

Tại sao tiếp theo. js sử dụng 307 và 308? . Ví dụ: nếu trình duyệt đưa ra yêu cầu tới

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

9 đã trả về mã trạng thái

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

80 với vị trí

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

81, thì yêu cầu tiếp theo có thể là

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

82 thay vì dự kiến ​​là

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

83. Tiếp theo. js sử dụng chuyển hướng tạm thời 307 và mã trạng thái chuyển hướng vĩnh viễn 308 để duy trì rõ ràng phương thức yêu cầu được sử dụng

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  84.

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  5 hoặc

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  86 - nếu sai thì

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  84 sẽ không được đưa vào khi đối sánh, chỉ có thể được sử dụng cho chuyển hướng bên ngoài

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  88.

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  5 hoặc

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  86 - có nên bao gồm ngôn ngữ khi đối sánh hay không

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  7 là một mảng gồm các thuộc tính

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  72,

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  73 và

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  74

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  75 là một mảng với các thuộc tính

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  72,

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  73 và

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  74

Chuyển hướng được kiểm tra trước hệ thống tệp bao gồm các trang và tệp

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

79

Chuyển hướng không được áp dụng cho định tuyến phía máy khách (______360,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

61), trừ khi có Middleware và khớp với đường dẫn

Khi chuyển hướng được áp dụng, mọi giá trị truy vấn được cung cấp trong yêu cầu sẽ được chuyển đến đích chuyển hướng. Ví dụ: xem cấu hình chuyển hướng sau

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

Khi yêu cầu

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

62, khách hàng sẽ được chuyển hướng đến

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

63

Cho phép khớp đường dẫn, ví dụ:

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

64 sẽ khớp với

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

65 (không có đường dẫn lồng nhau)

Để khớp với đường dẫn ký tự đại diện, bạn có thể sử dụng

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

66 sau một tham số, ví dụ:

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

67 sẽ khớp với

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

68

Để khớp với đường dẫn biểu thức chính quy, bạn có thể đặt biểu thức chính quy trong dấu ngoặc đơn sau một tham số, ví dụ:

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

69 sẽ khớp với

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

30 nhưng không khớp với

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

31

Các ký tự sau

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

32,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

33,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

34,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

35,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

36,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

66,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

38,

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

39 được sử dụng để khớp đường dẫn biểu thức chính quy, vì vậy khi được sử dụng trong

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

4 dưới dạng các giá trị không đặc biệt, chúng phải được thoát bằng cách thêm

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

71 trước chúng

Để chỉ đối sánh một chuyển hướng khi các giá trị tiêu đề, cookie hoặc truy vấn cũng khớp với trường

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

7 hoặc không khớp với trường

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

75, có thể sử dụng. Cả mục

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

4 và tất cả mục

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

7 phải khớp và tất cả mục

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

75 không được khớp để chuyển hướng được áp dụng

Các mục

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

7 và

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

75 có thể có các trường sau

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  72.

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  30 - phải là

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  31,

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  32,

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  33 hoặc

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  34

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  73.

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  30 - khóa từ loại đã chọn để khớp với

• {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  74.

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  30 hoặc

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  86 - giá trị cần kiểm tra, nếu không xác định thì bất kỳ giá trị nào cũng sẽ khớp. Một chuỗi giống như biểu thức chính quy có thể được sử dụng để nắm bắt một phần cụ thể của giá trị, e. g. nếu giá trị

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  40 được sử dụng cho

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  41 thì

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  42 sẽ có thể sử dụng được ở đích với

  {
    source: '/old-blog/:path*',
    destination: '/blog/:path*',
    permanent: false
  }
  

  43

Khi tận dụng hỗ trợ

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

84 với các chuyển hướng, mỗi

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

4 và

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

5 sẽ tự động có tiền tố là

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

84 trừ khi bạn thêm

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

48 vào chuyển hướng

Khi tận dụng hỗ trợ

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

49 với các chuyển hướng, mỗi

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

4 và

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

5 sẽ tự động được thêm tiền tố để xử lý

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

52 được định cấu hình trừ khi bạn thêm

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

53 vào chuyển hướng. Nếu sử dụng

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

53, bạn phải thêm ngôn ngữ vào trước

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

4 và

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

5 để khớp chính xác

Trong một số trường hợp hiếm hoi, bạn có thể cần chỉ định mã trạng thái tùy chỉnh cho Máy khách HTTP cũ hơn để chuyển hướng đúng cách. Trong những trường hợp này, bạn có thể sử dụng thuộc tính

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

57 thay vì thuộc tính

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

0, nhưng không thể sử dụng cả hai. Ghi chú. để đảm bảo khả năng tương thích với IE11, tiêu đề

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

59 được tự động thêm vào cho mã trạng thái 308

Làm cách nào để chuyển hướng đến một trang khác có giá trị trong JavaScript?

Làm cách nào để chuyển hướng đến một URL trong JavaScript?

Có thể chuyển hướng một trang trong JavaScript không?

Làm cách nào để chuyển sang trang tiếp theo trong JavaScript?