正确地惯性重定向到另一个页面？

Question

我试图在点击时重定向到另一个页面，由于某种原因它不起作用。这是我的 vue 上重定向按钮所在的代码。我尝试了两种不同的方法，但都不起作用。

<el-row class="import-btn">
    <a :href="'/imports/teachers'">
        <el-button type="warning">
            Importar
        </el-button>
    </a>
</el-row>
<el-row class="import-btn">
    <el-button type="warning" @click="redirectStudents()">
        Importar
    </el-button>
</el-row>

redirectStudents() {      
  this.$inertia.visit('/imports/students');
},

我有这样的 web.php 路由

Route::resource('imports/students', 'ImportStudentController');
Route::resource('imports/teachers', 'ImportTeacherController');

在两个控制器中，我目前只填充了index()

public function index()
{
   return Inertia::render('Import/Students');
}

public function index()
{
    return Inertia::render('Import/Teachers');
}

在教师和学生的 vue 文件中，我有这些页面的基本布局和标题，因此它们不是空的。

当我单击该<a :href="">按钮时，我会被重定向到该链接，但页面完全空白，当我单击另一个按钮时，它会打开，就像一个窗口一样，里面也是空白的。

解决这个问题的正确方法是什么？

Answer 1

链接

在 Inertia.js 中创建链接非常简单。它有一个自定义标签来表示它属于框架的范围。

<inertia-link href="/">Home</inertia-link>

更新：自惯性-vue 0.7.0 版本和惯性-vue3 0.5.0 版本以来，链接工作方式发生了重大变化。

对于您的 Vue.js 2 组件：

import { Link } from '@inertiajs/inertia-vue'

<Link href="/">Home</Link>

对于 Vue.js 3 组件：

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/">Home</Link>

在引擎盖下有一个<a>标签，这也意味着传递的所有属性都将发送到该底层<a>标签。

重定向

如果您真正寻找的只是简单的链接单击 - 而不是重定向本身- 那么您可以使用上面的代码。

如果您对重定向感兴趣 - 例如在更新用户或类似的事情之后 - 那么只需Redirect像在任何其他 Laravel 应用程序中那样使用外观就足够了。

import { Link } from '@inertiajs/inertia-vue'

<Link href="/">Home</Link>

如果您安装了 Inertia.js laravel 适配器包，那么此重定向将返回 303 状态码，该状态码与 302 状态码相同，只不过请求更改为 GET 请求。

希望这可以帮助！