从Vue组件重定向到Laravel路由

Question

我有一个名为searchbox的Vue组件，我希望用户在输入名称并点击搜索按钮后能够重定向到显示结果的页面。我正在使用axios进行http请求。以下是我的模板：

<form @submit.prevent="searchResult">
    <div class="field has-addons searchbox">
        <div class="control">
            <input class="input" type="text" id="search" name="q" placeholder="Search a video..." @keyup.enter="searchResult"  v-model="searchData">
        </div>

        <div class="control">
            <button class="button is-primary"><i class="fa fa-search"></i></button>
        </div>
    </div>
</form>

这是我的Vue文件中的脚本:

<script>
    export default {

        data() {
            return {
                searchData: null,
            };
        },

        methods: {
            searchResult() {
                axios.get('/search?q=' + this.searchData);
            }
        }       
    }
</script>

这是我的搜索控制器：

class SearchController extends Controller {

    public function index(Request $request) {
        return view('search.index');
    }
}

然而，我看不到重定向。在laravel中，如何从vue组件重定向到另一个路由？

vue-router是必要的吗？还是我们可以采用其他方法？

- Pritam Bohra

Answer 1

您可以使用window.location.href = '/search?q=' + this.searchData;替换axios.get('/search?q=' + this.searchData);

这将直接将页面重定向到指定的URL，而不是通过ajax请求获取数据。

- Kermit

---

它可以工作 (y) 使用Vue也可以实现相同的结果吗？ - Pritam Bohra

当然，你可以使用vue-router来实现相同的结果。 var searchUrl = '/search?q=' + this.searchData;this.$router.push({path:searchUrl}); - Kermit