如何为 vue-router 生成带有表单的 URL？

Question

我正在尝试创建搜索栏（表单），但我需要它有漂亮的 URL 但我使用的是 Vue-router 所以我的 app.js 看起来像这样

let Search = Vue.component('search', require('./components/Search.vue'));
const routes = [
    { path: '/protocols/:param', component: Search },
]

现在当我输入 /protocols/test 时功能正常，我得到了我想要的结果，但我不确定如何创建一个表单，所以当我输入一些内容以将我重定向到该路由 /protocols/:param 时，因为我的页面是vue组件

<form action="/protocols/?what goes here?">
    <input type="text" placeholder="Search..." class="" name="" id="search">
</form>

因为所有教程都是为了在同一页面上进行搜索而制作的，但我需要专门为结果提供一个教程

Answer 1

您可以使用 v-model 将输入值分配给您的数据，并使用计算的属性生成 URL 操作，如下所示：

<form :action="urlAction">
    <input type="text" placeholder="Search..." class="" name="" id="search" v-model='search'>
</form>

现在使用数据和计算道具来构建动态 URL

data () {
  return {
    search: ''
  }
},

computed: {
  urlAction () {
    return "/protocols/" + this.search
   }
}

How to generate URL with form for vue-router?