Inertiajs

Question

在我的索引页上我制作了一个聊天框。我的 Vue 组件中有一个表单元素，它通过“UseForm”执行惯性 post。

我遇到的问题是，因为我在“/chatbox/send”上创建了 post，之后我必须重定向到“index/home”，否则 URL-header 仍然是“/chatbox/send”，这是我不想要的。

此外，页面在渲染时会自动再次向上滚动。

我的问题；如何重新呈现页面，以便 URL-header 再次设置为“/home”并且页面不会向上滚动？

public function sendChatMessage(Request $request) {
    $msg = $request->input('text');
    $username = Auth::user()->only('name')['name'];

    if($this->createChatMessage($msg, $username)) {
        return redirect('index/home');
    }

    return false;
}

Answer 1

你必须在我想你使用的 vuejs 中的路线中定义它。

通常它应该是这样的：

this.$inertia.post(route('chatbox.send'), {text: this.text}, { preserveState: false, preserveScroll: true })

preserveState：如果你return在你的php控制器中使用相同的路由，它用来表示你是否要刷新页面。

preserveScroll: 用于表示您想保持与发送时相同的滚动。

更多信息：https://inertiajs.com/manual-visits

在你的控制器中我会做：

public function sendChatMessage(Request $request) {
  $msg = $request->input('text');
  $username = Auth::user()->only('name')['name'];

  if($this->createChatMessage($msg, $username)) {
    return redirect()->route('home');
  }
}

Inertiajs - Laravel：避免在 Post 后滚动并设置页眉

Inertiajs - Laravel: Avoid Scroll after Post and Set Header

php

laravel

vue.js