Question

这些是我的路线：

import Search from './Search.vue'
import Home from './Home.vue'
export const routes = [
    {path : '/', name: 'Home', component: Home},
    {path : '/search/:keyword?', name: 'Search', component: Search}, //i put ? in the end of path to make this optional.
];

这是路由到搜索页面的操作：

this.$router.push({
   name : 'Search',
   params : {
      keyword : this.keywords // set this to empty string
   },
   query: {
       page : 1
   }
})

如果this.keywords为''（空字符串），则会返回gamedb.com/（主页）。如果this.keywords中有一些字母，则路径将转到gamedb.com/search/this-is-the-keyword。

我的预期行为是当this.keywords为空时，路径将转到gamedb.com/search。

我的console.log显示了这一点：

[vue-router]缺少命名路由“搜索”的参数：预期 “keyword”匹配“[^ /] +？”，但收到“”

我不是已经在路线的末端添加了问号吗？我的代码怎么了？

Answer 1

你是正确的，将问号?附加到路径路径中的参数将使该参数可选。但是，这只是意味着如果你根本没有通过keyword参数，Vue Router就不会抱怨。

您正在传递keyword参数，但它是一个空字符串。 URL params不能是空字符串，因此您收到错误。

只有当params的值不为空时，您才需要将this.$router.push对象添加到传递给this.keywords的选项中：

this.$router.push({
  name : 'Search',
  params: (this.keywords.length > 0) ? { keyword: this.keywords } : {},
  query: {
    page : 1
  }
});

空可选参数将落入主路径

1 个答案: