html - 如何为 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
   }
}