我使用(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时,它的ID在2和1中再次更改。并且出现重复错误。
[NavigationDuplicated {_name:“ NavigationDuplicated”,名称:“ NavigationDuplicated”,消息:“导航到当前位置(“ /?page = 1”不允许)“
基于this answer如何将当前查询替换为另一个查询,以及this answer基于如何简单地忽略该错误,我提出了以下解决方案。
[我们使用计算属性在当前页面更改时自动更改URL,并根据答案我在推送中添加空的.catch
以抑制错误,因为它仍然可以正常浏览。
<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>