Vue - 복수의 옵션라우터 파라미터

Vue - 복수의 옵션라우터 파라미터

여러 검색 옵션을 사용하여 구성 요소를 작성하려고 합니다.

경로에는 다음 중 하나를 지정할 수 있습니다.

• my-site.com/gallery
• my-site.com/gallery/search+keyword
• my-site.com/gallery/140
• my-site.com/gallery/search+keyword/140/page/10

또는 기타 조합

이게 내 루트야

const galleryPageRoute = {
  path: '/gallery/:search?/:photocat?/:page(page\/\\d+)?',
  component: Gallery,
  name: 'Gallery',
  props: route => (Object.assign(route.params, { photocat: route.params.photocat, search: route.params.search, page: pageFromPath(route.path) }))
}

이것이 내 컴포넌트의 파라미터를 설정하는 방법입니다.

props: {
    page: {
      type: Number,
      required: true
    },
    photocat: {
      required: false
    },
    search: {
      type: String,
      required: false
    }
  },

filterCat(catid) {
      this.$router.push({name:'Gallery', params:{
        search: this.search ? this.search : undefined, 
        photocat: catid+'/'
      }});
    },

handleSubmit(result) {
      this.$router.push({name:'Gallery', params:{
        search: result.name,
        photocat: this.photocat ? this.photocat : undefined
      }});
    },

검색 파라미터가 존재하지 않는 경우 위의 예에서 140이 검색 파라미터로 간주되어 컴포넌트의 prop "search"가 이 값을 가져옵니다.filterCat()이 ID는 부동산 복사용으로 설정되었습니다.

매치할 수 있는 것은vue-router, 다음의 구문(표준)을 사용할 필요가 있습니다.

import VueRouter from 'vue-router'

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/' },
    // asterisk can match anything
    { path: '/asterisk*' },
    // asterisk can match anything like params
    { path: '/asterisk/*' },
  ]
})

언급URL : https://stackoverflow.com/questions/57453775/vue-multiple-optional-router-parameters