我有一个可用的分页，使用(Laravel、Vuejs和Bootstrap Vue(，但我需要在url中添加页码才能使用历史记录。(用于后退按钮(。这就是我现在所拥有的。目标是将页面编号放在url中，以便有一个后退按钮。
{
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
更新
我在get响应中添加了router.push({ path: "/", query: { page: this.currentPage } });。我有路径，但当我尝试访问第2页时，id会在2中更改，并再次在1中更改。我得到了一个重复的错误。
NavigationDuplicated｛_name："NavigationDublicated"，名称："NavigationDuplicated"，消息："导航到当前位置("/？page=1"(是不允许的">
UPDATE 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>
我建议使用<b-pagination-nav>而不是<b-pagination>，因为当您稍后尝试使用它来更改url并使用浏览器历史记录(后退/前进按钮(时，第二个会出现问题。如果你不关心浏览器历史记录，你也可以查看这个答案。使用RESTAPI进行引导vue分页
这是我的数据：
data() {
return {
totalRows: 0, // make sure to update that when calling the server
totalPages: 1, // this too
isBusy: false,
FPS: {
filter: {},
currentPage: 1
}
}
},
这是我的<b-table>
<b-table
:items="dataProvider"
:fields="fields"
:per-page="FPS.perPage"
:filter="FPS.filter"
:sort-by="FPS.sortBy"
:sort-desc="FPS.sortDesc"
:head-variant="headVariant"
:current-page="FPS.currentPage"
:busy="isBusy"
:api-url="apiUrl"
responsive
bordered
hover
>
这是我的分页组件
<b-pagination-nav
v-model="FPS.currentPage"
align="right"
use-router
:number-of-pages="Math.max(1,totalPages)"
:link-gen="pageChanged"
/>
添加此观察程序以跟踪所有$route.query更改(这也适用于初始重新加载(
watch: {
'$route.query': {
handler(newVal) {
const currentPageFromUrl = parseInt(newVal.currentPage)
this.FPS = this.sanitizeQueryParams(newVal)
this.$nextTick(() => {
if (currentPageFromUrl) {
this.FPS.currentPage = currentPageFromUrl
}
})
},
immediate: true
}
},
然后添加这个方法(即使这改变了查询部分，它仍然可以使用浏览器的后退/前进按钮！(：
pageChanged(pageNum) {
return {
path: this.$route.path,
query: { ...this.$route.query, currentPage: pageNum }
}
},
我还没有单独测试过，但它可以与b-table上的@filtered、@sort-changed事件一起使用
这里的上下文是我的sanceQueryParams(本质上是将字符串转换为适当的类型，并在需要时填充空格(
sanitizeQueryParams(queryParams) {
const result = {}
if (!queryParams) {
queryParams = {}
}
if (queryParams.filter && typeof queryParams.filter === 'string') {
result.filter = JSON.parse(queryParams.filter)
} else {
result.filter = queryParams.filter || {}
}
if (!queryParams.sortBy) {
result.sortBy = 'id'
} else {
result.sortBy = queryParams.sortBy
}
if (queryParams.sortDesc === undefined) {
result.sortDesc = true
}
if (queryParams.sortDesc === 'true') {
result.sortDesc = true
} else if (queryParams.sortDesc === 'false') {
result.sortDesc = false
} else {
result.sortDesc = queryParams.sortDesc
}
if (!queryParams.perPage) {
result.perPage = 10
} else {
result.perPage = parseInt(queryParams.perPage)
}
if (!queryParams.currentPage) {
result.currentPage = 1
} else {
result.currentPage = parseInt(queryParams.currentPage)
}
return result
}