将分页号放在网址Vuejs中 [英] Place pagination number in url Vuejs
问题描述
我使用(Laravel,Vuejs和Bootstrap-Vue)进行分页,但是我需要在url中添加页码以使用历史记录.(用于后退按钮).这就是我到目前为止所拥有的.目标是地点页面nr.在网址中添加一个后退按钮.
I have an working pagination,using (Laravel,Vuejs and Bootstrap-Vue), but I need to add the page number in url to use history. (for back button). That's what I have till now. The goal is place page nr. in url,to have a back button.
{
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:{页面:this.currentPage}});
.我有路径,但是当我尝试访问页面2时,它在2和1中再次更改了id.我得到了重复的错误.
I add router.push({ path: "/", query: { page: this.currentPage } });
on my get response. I have the path ,but when I try to access page 2 , the id it'changed in 2, and in 1 again. and I got an error of duplicate.
NavigationDuplicated {_name:"NavigationDuplicated",名称:"NavigationDuplicated",消息:导航到当前位置("/?page = 1")不允许"
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/?page=1") is not allowed"
更新2 我几乎做到了,唯一无法使用的是活动类,在分页中,始终第1页是活动的.(内容,网址和currentPage变量已更改)
UPDATE 2 I almost made it, the only thing that don't work yet is active class, on pagination, always page 1 is active. (content,url and currentPage variable are changed)
watch:{
currentPage() {
this.$router
.push({
query: {
...this.$route.query,
page: this.currentPage
}
})
.catch(() => {});
},
}
//In reseponse from axios:
this.currentPage = response.data.current_page;
推荐答案
基于关于您如何可以忽略该错误的答案,我想出了以下解决方案.
Based on this answer on how to replace the current query with another, and this answer on how you can simply ignore the error, i came up with the solution below.
当当前页面更改时,我使用计算属性自动更改URL,并根据答案添加一个空的 .catch
来抑制错误,因为该错误仍会导航很好.
I use a computed property to automatically change the URL when our current page changes, and based on the answer i add an empty .catch
to our push to suppress the error, since it still navigates just fine.
修改
它完全忘记了用于更改URL的 b-pagination-nav
组件.我认为文档中的第一个示例可能对您很有用,因为这会通过?page = n
查询更改当前页面.
It completely forgot about the b-pagination-nav
component, which is designed to change the URL. I think the first example in the documentation might be of use to you, since that changes the current page with a ?page=n
query.
<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>
这篇关于将分页号放在网址Vuejs中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!