Vue动态参数问题：点击搜索后路径丢失search跳转到根路径

看起来你的搜索页面跳转异常是由几个关键代码问题导致的，我帮你逐一排查并给出修复步骤：

1. 路由参数名称不匹配（最直接原因） #

在Search.vue的submitSearch方法里，你传递的参数是tags: this.searchTopic，但路由定义里的参数名称是topic（来自paths.js里的:topic?）。参数名称不匹配会导致Vue Router无法正确匹配到Search路由，从而 fallback 到根路径。

修复代码：
修改submitSearch方法的参数：

submitSearch() {
  this.$router.replace({ 
    name: "Search", 
    params: { 
      term: this.searchTerm, 
      author: this.searchAuthor, 
      topic: this.searchTopic  // 把tags改成topic
    } 
  })
}

2. 路由路径末尾的冗余斜杠 #

在routes.js里，你给路径加了额外的+ '/'，这会导致生成的路由路径末尾带有斜杠（比如/search/:term?/:author?/:topic?/:page(page\/\\d+)?/），而当你调用router.replace时，生成的URL不会包含这个末尾斜杠，导致路由匹配失败。

修复代码：
去掉路由路径里的+ '/'：

{
  path: paths.postsPageWithSearch('search'),  // 移除末尾的+ '/'
  component: Search,
  name: 'Search',
  meta: { bodyClass: 'search' },
  // ... 其他代码
},

3. Props的必填设置与可选参数冲突 #

你的路由参数term、author、topic都是可选的（路径里带?），但在Search.vue的props定义里却设置为required: true。初始加载搜索页面时（没有任何参数），Vue会因为props缺失而抛出警告，可能导致组件加载异常，进而影响路由匹配。

修复代码：
把这些props的required改为false，并设置默认值：

props: {
  page: {
    type: Number,
    required: true
  },
  term: {
    type: String,
    required: false,  // 改为false
    default: ''       // 添加默认值
  },
  author: {
    type: String,     // 建议加上类型定义
    required: false,
    default: ''
  },
  topic: {
    type: String,
    required: false,
    default: ''
  },
},

4. 可选参数的路由匹配优化 #

当可选参数有缺失时（比如只传term，不传author和topic），生成的路径会出现连续的斜杠（比如/search/my-term//），这可能导致Vue Router解析参数出错。可以调整paths.js里的路径生成逻辑，让可选参数可以灵活匹配：

const tagToParam = {
  postname: ':slug',
  search: ':term?(/:author?(/:topic?))?'  // 嵌套可选，避免连续斜杠
}

额外优化：表单提交逻辑 #

你的表单使用了@click.prevent，但按钮是type="submit"，更规范的做法是监听表单的submit事件并阻止默认行为，去掉按钮上的@click绑定：

<form @submit.prevent="submitSearch()">
  <!-- 表单内容 -->
  <button class="button" type="submit">Search</button>
</form>

内容的提问来源于stack exchange，提问作者shubhra