我制作了一个应用程序，用户可以在其中创建一些文件并查看模板中的所有数据。每篇论文都有一个joincode，它是在创建时生成的。
我在web.php中定义了加入路由，如下所示：
Route::get('/conceptPaper/lobby/{joincode}', 'App\Http\Controllers\ConceptPaperController@join');
并通过以下方式在控制器中加入联接功能：
public function join($joincode)
{
try {
$conceptPaper = ConceptPaper::where('join_code', $joincode)->firstOrFail();
return response()->json($conceptPaper);
} catch(ModelNotFoundException $e)
{
return view('errors.404');
}
}
我使用firstOrFail检查联接代码是否存在。如果存在，则应返回响应，否则应将用户重定向到自定义404页面。
我创建了一个自定义组件，该组件将联接代码作为路由参数获取并显示概念文件
{
path: '/conceptPaper/lobby/:joincode',
name: 'conceptPaper',
component: () => import('./views/ConceptPaper.vue')
},
因此，当用户使用正确的代码加入大厅时，他将被重定向到页面，其中包含来自相应论文的所有数据：
showPaper: async function (conceptPaper) {
const joinCode = conceptPaper.join_code;
this.$router.push({ name: "conceptPaper", params: { joincode: joinCode }, });
},
我的问题是，当用户输入错误的代码时，他仍然会被重定向到视图。当我在“网络”标签中检查响应时，将显示404页面。
我认为我将它从根本上错了。谁能告诉我如何正确执行操作？当suer输入正确的联接代码时，他应该看到ConceptPaper.vue视图。如果代码错误，则应将其重定向到404页面。
从您的代码中，我假设您正在使用VueJs作为SPA，并且您正在从laravel后端API检索数据。
基于此，您的join函数应该返回您在前端中使用的json数据，但是如果ConceptPaper找不到，则返回一个视图而不是json，该视图不会有太大变化，因为您只是在更改数据前端收到的消息，但前端组件未更改。
我要做的是删除try catch块，该块将从API返回404响应，并在vue中处理404情况，并在vue中创建NotFound视图。
拉拉韦尔
public function join($joincode)
{
$conceptPaper = ConceptPaper::where('join_code', $joincode)->firstOrFail();
return response()->json($conceptPaper);
}
视图
router/index.js
const routes = [
// previous routes
{
path: '/not-found',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
}
]
NotFound.vue
<template>
// page here
</template>
export {
name: 'NotFound'
}
如果使用axios，最后处理未找到的API调用
axios.get('/conceptPaper/lobby/-1000')
.catch(function (error) {
if (error.response.status === 404) {
this.$router.push('NotFound');
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句