我正在尝试构建一个具有多个(可选)搜索选项的组件。

路径可以是以下任意一个:

• 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 将被视为搜索参数，因此我组件中的属性“搜索”将获得此值，但是，正如您在filterCat() 已经为属性 photocat 设置了这个 id

最佳答案

要与 vue-router 匹配任何内容，您应该使用以下语法 (docs):

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/*' },
  ]
})

https://stackoverflow.com/questions/57453775/