时间戳

首页 > 解决方案 > Laravel + Vue 页面重定向

laravel-5 - Laravel + Vue 页面重定向

问题描述

当我尝试创建必须在另一个页面中完成的内容时，如何重定向到一个页面？

例子：

我创建了一个页面，该页面将询问书籍的详细信息并将其保存到数据库中。第一页会要求用户放书的封面、标题和描述。我使用 Vue Component 作为页面和 axios 将其保存在数据库中。我使用此代码window.location.href = "/create-book/"重定向到另一个页面，用户可以开始写作，当他保存它时，它将保存在他正在制作的当前书籍中。

现在我陷入了这个

Vue 组件

axios.post('/admin/saveBook', formData).then(function(result){
    // console.log(result.data)
    window.location.href = "/admin/write-book";
});

在我的控制器中我使用了这个

控制器

return response()->json($book);

我的目标只是制作一整页来写这本书的内容。谢谢！

标签： laravel-5vuejs2

解决方案

您可能会考虑使用Vue Router，特别是Dynamic Route Matching和Programmatic Navigation。

在您的路由器中，您的书籍将拥有一条动态路径。

routes: [
    {
        // dynamic segments start with a colon
        path: '/books/:id',
        name: 'book',
        component: Book
    }
]

然后在您的组件中，您将导航到有关创建的书。

axios.post('/admin/saveBook', formData).then(function(result) {
    this.$router.push({ name: 'book', params: { id: result.data.book.id }});
});

如果您在导航到这本书时需要它的信息，您可以在安装时使用 id 获取它，或者将这本书作为导航的道具传递。请参阅将道具传递给路由组件。

推荐阅读