laravel - 在 url Vuejs 中放置分页号
问题描述
我有一个工作分页,使用(Laravel、Vuejs 和 Bootstrap-Vue),但我需要在 url 中添加页码以使用历史记录。(用于后退按钮)。这就是我到目前为止所拥有的。目标是放置第 nr 页。在网址中,有一个后退按钮。
{
path: "/", //here I will change it with "/:id"
name: "Home",
component: Home,
},
<b-pagination
v-model="currentPage"
:per-page="perPage"
:total-rows="totalRows"
>
</b-pagination> //this is my pagination nav, that takes currentPage from get Request
axios.get('/list',{
params: {
'page': this.currentPage,
'per_page': this.perPage,
},
})
.then(response => {
this.perPage = response.data.per_page;
this.totalRows = response.data.total;
})
.catch(function (error) {
console.log('Error');
}) //and this is the get request
更新
我添加 router.push({ path: "/", query: { page: this.currentPage } });
了我的回复。我有路径,但是当我尝试访问第 2 页时,它在 2 中更改了 id,并在 1 中再次更改。我得到了重复的错误。
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "导航到当前位置 ("/?page=1") 是不允许的"
更新 2 我几乎成功了,唯一不起作用的是活动课程,在分页上,第 1 页始终处于活动状态。(内容、url 和 currentPage 变量已更改)
watch:{
currentPage() {
this.$router
.push({
query: {
...this.$route.query,
page: this.currentPage
}
})
.catch(() => {});
},
}
//In reseponse from axios:
this.currentPage = response.data.current_page;
解决方案
基于这个关于如何用另一个查询替换当前查询的答案,以及关于如何简单地忽略错误的这个答案,我想出了下面的解决方案。
当我们的当前页面发生变化时,我使用计算属性自动更改 URL,并根据答案我在.catch
推送中添加一个空来抑制错误,因为它仍然可以正常导航。
编辑
它完全忘记了b-pagination-nav
用于更改 URL 的组件。我认为文档中的第一个示例可能对您有用,因为它会通过?page=n
查询更改当前页面。
<template>
<b-pagination
v-model="currentPage"
:per-page="perPage"
:total-rows="totalRows"
>
</b-pagination>
<b-table :items="items" :current-page="currentPage" :per-page="perPage">
</b-table>
</template>
<script>
export default {
created() {
// Save the page for later use.
// If our query isn't found, we default to page 1.
const page = this.$route.query.page || 1;
// fetch our data, this fetches all records and uses clientside pagination.
fetch("https://example.com/movies.json")
.then(resp => resp.json())
.then(data => {
this.items = data;
// since b-pagination will change the currentPage to 1,
// we need to change it back to the actual page after fetching our items.
this.$nextTick(() => {
this.currentPage = page;
});
});
},
computed: {
totalRows() {
return this.items.length;
},
currentPage: {
get() {
return this.$route.query.page || 1;
},
set(newPage) {
// You could alternatively call your API here if you have serverside pagination
this.$router
.push({ query: { ...this.$route.query, page: newPage } })
.catch(() => {});
}
}
},
data() {
return {
perPage: 5,
items: []
};
}
};
</script>
推荐阅读
- google-cloud-endpoints - Google 的 Endpoints 中的 EndpointsServlet 类有什么作用?
- android - Android Studio CMake 错误(clang.exe 损坏)
- c - 堆栈:低内存与高内存地址实际位置?
- react-native - React Native - 基于状态的条件返回按钮
- c# - 为什么 SmtpClient.SendAsync 不是异步的?
- c# - 如何确定 now(utc) 是否在 ISO 8601 格式的一周中的给定天数和一天中的时间范围内
- python - 如何在 Python 中的“except”语句中添加 if/else?
- node.js - 如何从 node.js 应用程序在命令行上传递带引号和空格的数据?
- sql-server - 合并:在匹配时插入
- python - 找不到 Django 2.0.5 404 错误页面