如何使用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将输入值分配给数据，并使用computed属性生成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
   }
}