Vue/Nuxt中表单提交、路由跳转传参及API渲染实现问询

嘿，我来帮你把这个流程优化得更贴合Nuxt/Vue的开发习惯，不用手动拼接URL参数也能轻松实现需求～

首先，咱们先改进表单的提交逻辑，告别原生form的action属性，用Vue的事件处理来控制路由跳转，这样能避免页面刷新，还能更灵活地传递参数：

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="foobar" name="foobar" placeholder="输入内容">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      foobar: ''
    }
  },
  methods: {
    handleSubmit() {
      // 用Nuxt内置的$router跳转到/search路由，自动携带查询参数
      this.$router.push({
        path: '/search',
        query: { foobar: this.foobar }
      })
    }
  }
}
</script>

接下来是关键的/search页面处理，这里推荐用Nuxt的asyncData钩子（最适合服务端渲染场景），它会在组件渲染前执行，直接拿到路由的查询参数并发起API请求：

<template>
  <div class="search-page">
    <h1>搜索结果</h1>
    <div v-if="results.length > 0" class="results-list">
      <div v-for="item in results" :key="item.id" class="result-item">
        {{ item.title }}
      </div>
    </div>
    <div v-else-if="isLoading">
      加载中...
    </div>
    <div v-else>
      请输入关键词进行搜索
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  async asyncData({ $axios, route }) {
    // 从路由query中获取提交的参数
    const { foobar } = route.query
    let results = []
    
    if (foobar) {
      // 发起API请求，这里用Nuxt的axios模块（需要提前安装配置）
      const res = await $axios.get('/api/search', {
        params: { foobar }
      })
      results = res.data
    }
    
    return { results }
  },
  mounted() {
    this.isLoading = false
  }
}
</script>

如果你更倾向于客户端渲染，或者不需要服务端渲染的场景，也可以用mounted钩子来处理：

<script>
export default {
  data() {
    return {
      results: [],
      isLoading: true
    }
  },
  async mounted() {
    const { foobar } = this.$route.query
    if (foobar) {
      const res = await this.$axios.get('/api/search', { params: { foobar } })
      this.results = res.data
    }
    this.isLoading = false
  }
}
</script>

额外配置提示 #

如果用$axios的话，需要先安装Nuxt的axios模块：

npm install @nuxtjs/axios

然后在nuxt.config.js里配置：

export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    // 你的API基础地址
    baseURL: 'https://your-api-domain.com'
  }
}

这种方案的优势在于：

• 无需手动拼接URL参数，Nuxt路由会自动处理
• asyncData支持服务端渲染，对SEO友好
• 完全基于Vue/Nuxt的生态，代码更简洁易维护

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