Tham số tùy chọn trong bộ định tuyến vuejs

105

Tôi cần định tuyến đến một thành phần nhất định theo hai cách - một có tham số, một không có. Tôi đã tìm kiếm các thông số tùy chọn và bằng cách nào đó không thể tìm thấy nhiều thông tin.

Vì vậy, lộ trình của tôi:

{
    path: '/offers/:member',
    component: Offers,
    name: 'offers',
    props: true,
    meta: {
        guest: false,
        needsAuth: true
    }
},

Khi tôi gọi nó với param theo lập trình, tất cả đều ổn

this.$router.push({ path: /offers/1234 });

Tuy nhiên tôi cũng cần gọi nó qua nav như thế này

<router-link to="/offers">Offers</router-link>

Thành offersphần chấp nhận chỗ dựa

props: ['member'],

Và thành phần được sử dụng như vậy

<Offers :offers="data" :member="member"></Offers>

Bây giờ, cách xấu xí mà tôi đã quản lý để làm cho nó hoạt động là sao chép tuyến đường và khiến một trong số chúng không có đạo cụ:

{
    path: '/offers',
    component: Offers,
    name: 'offers',
    props: false,
    meta: {
        guest: false,
        needsAuth: true
    }
},

Nó thực sự hoạt động, nhưng tôi không hài lòng với nó - cũng ở chế độ nhà phát triển vuejs đang cảnh báo tôi [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Chắc chắn có một cách để thực hiện tham số tùy chọn trong cuộc gọi thành phần :member="member"?

vue.js

— Yo Yo Ma
nguồn

232

Chỉ cần thêm một dấu chấm hỏi ?sẽ làm cho nó trở thành tùy chọn.

{
    path: '/offers/:member?',
    ...
},

Nó hoạt động cho Vue Router 2.0 trở đi.

Nguồn: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

— Jacob Goh
nguồn

20

Rất thích nếu điều này có trong hướng dẫn!

— Damon

3

Cảm ơn, điều này rất hữu ích. Ước gì điều này được đề cập rõ ràng trong hướng dẫn.

— Gaurav Joshi

1

Ngoài ra, bạn cũng có thể gửi các thông số khác nhau, từ nơi bạn gọi tuyến đường của mình.

<router-link
    :to="{
     name: 'ComponentName',
     params: { member: {}, otherParams: {} }
     }"
>

— Amit Kadam
nguồn

0

Đối với các mẫu đối sánh nâng cao , sách hướng dẫn cho biết :

vue-router sử dụng path-to-regexp làm công cụ đối sánh đường dẫn của nó, vì vậy nó hỗ trợ nhiều mẫu đối sánh nâng cao như phân đoạn động tùy chọn, không hoặc nhiều / một hoặc nhiều yêu cầu và thậm chí cả mẫu regex tùy chỉnh. Kiểm tra tài liệu của nó để biết các mẫu nâng cao này và ví dụ về cách sử dụng chúng trong vue-router.

trang path-to-regexp / manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

— JCH77
nguồn