Vuejs2 Vue-创建动态参数

我正在尝试创建一个搜索页面（

my site.com/search

），需要在单击时向此url传递3个可选的动态参数

问题在于单击某个内容正在从路径中删除“

search

”，并将我带到根路径-

my site.com/

。我很难找出是什么引起的

path.js

const tagToParam = {
  postname: ':slug',
  search: ':term?/:author?/:topic?'
}
const paginateParam = ':page(page\/\\d+)?'
export default {
  postsPageWithSearch: (slug) => slug ? `/${slug}/${tagToParam.search}/${paginateParam}` : `/${paginateParam}`,
}

routes.js

import Search from '@/components/Search'
import paths from './paths'

{
    path: paths.postsPageWithSearch('search') + '/',
    component: Search,
    name: 'Search',
    meta: { bodyClass: 'search' },
    props: route =>  (Object.assign(route.params, { 
        term: route.params.term,
        author: route.params.author,
        topic: route.params.topic,
        page: pageFromPath(route.path)
      } ))
  },

Search.vue

<template>
  <main class="site-content">
    <div class="container">
        <div class="advanced-search">
            <form @click.prevent>
                <input type="text" 
                    name="searchTerm"
                    placeholder="Search title..." 
                    tabindex="1"
                    v-model="searchTerm">
                <select v-model="searchAuthor">
                    <option value="">All</option>
                    <option 
                        v-for="author in authors"
                        :value="author.id"
                        :key="author.id">{{ author.name }}</option>
                </select>
                <select v-model="searchTopic">
                    <option value="">All</option>
                    <option 
                        v-for="topic in topics"
                        :value="topic.id"
                        :key="topic.id">{{ topic.name }}</option>
                </select>
                <button class="button" type="submit" @click="submitSearch()">Search</button>
            </form>
        </div>

        <section v-if="posts">
            <post-item
                v-for="post in posts"
                :key="post.id"
                :post="post"
                :postmeta=false
            />
        </section>
    </div>
  </main>
</template>

<script>
import PostItem from '@/components/template-parts/PostItem'

export default {
    name: 'Search',
    components: {
        PostItem,
    },
    props: {
        page: {
            type: Number,
            required: true
        },
        term: {
            type: String,
            required: true
        },
        author: {
            required: true
        },
        topic: {
            required: true
        },
    },
    data() {
        return {
            postsRequest: {
                type: 'quote',
                params: {
                    per_page: 5,
                    search: this.term,
                    authors: this.author,
                    tags: this.topic,
                    page: this.page
                },
                showLoading: true
            },
            totalPages: 0,
            authorsRequest: {
                type: 'authors',
                params: {
                    per_page: 100,
                },

            },
            topicsRequest: {
                type: 'tags',
                params: {
                    per_page: 100,
                },
            },
            searchTerm: '',
            searchAuthor: '',
            searchTopic: ''
        }
    },
    computed: {
        authors () {
            return this.$store.getters.requestedItems(this.authorsRequest)
        },
        topics () {
            return this.$store.getters.requestedItems(this.topicsRequest)
        },
        posts() {
            return this.$store.getters.requestedItems(this.postsRequest)
        }
    },
    methods: {
        getAuthors() {
            return this.$store.dispatch('getItems', this.authorsRequest)
        },
        getTopics() {
            return this.$store.dispatch('getItems', this.topicsRequest)
        },
        getPosts() {
            return this.$store.dispatch('getItems', this.postsRequest)
        },
        setTotalPages() {
            this.totalPages = this.$store.getters.totalPages(this.postsRequest)
        },
        submitSearch() {
            this.$router.replace({ 
                name: "Search", 
                params: {
                    term: this.searchTerm,
                    author: this.searchAuthor,
                    tags: this.searchTopic
                }
            })
        }
    },
    created() {
        this.getAuthors()
        this.getTopics()
        this.getPosts().then(() => this.setTotalPages())
    },
}
</script>

全部的
{{author.name}
全部的
{{topic.name}
搜寻
从“@/components/template parts/PostItem”导入PostItem
导出默认值{
名称：'搜索'，
组成部分：{
职位，
},
道具：{
第页：{
类型：数字，
必填项：true
},
术语：{
类型：字符串，
必填项：true
},
作者：{
必填项：true
},
主题：{
必填项：true
},
},
数据（）{
返回{
请求后：{
键入：“quote”，
参数：{
每页：5，
搜索：这个.term，
作者：这位作者，
标签：this.topic，
佩奇：这个。佩奇
},
显示加载：正确
},
总页数：0，
作者请求：{
键入：“作者”，
参数：{
每页：100，
},
},
主题请求：{
键入：“标记”，
参数：{
每页：100，
},
},
搜索词：“”，
搜索作者：''，
搜索主题：“”
}
},
计算：{
作者（）{
返回此.store.getters.requestedItems（this.authorsRequest）
},
主题（）{
返回此.store.getters.requestedItems（this.topicsRequest）
},
员额（）{
返回此.store.getters.requestedItems（this.postsRequest）
}
},
方法：{
getAuthors（）{
返回此.store.dispatch（'getItems'，this.authorsRequest）
},
getTopics（）{
返回此.store.dispatch（'getItems'，this.topicsRequest）
},
getPosts（）{
返回此.store.dispatch（'getItems'，this.postsRequest）
},
setTotalPages（）{
this.totalPages=this.store.getters.totalPages（this.postsRequest）
},
次搜索（）{
此。$router.replace（{
名称：“搜索”，
参数：{
术语：this.searchTerm，
作者：这个，作者，
标签：this.searchTopic
}
})
}
},
创建（）{
这是getAuthors（）
这个。getTopics（）
this.getPosts（）。然后（（）=>this.setTotalPages（））
},
}

看起来

元素有@click.prevent。尝试将

@单击。阻止
放在提交按钮上