问题: 列表页非第一页数据跳转列表详情页再返回后展示的数据是第一页
需求:跳转时是第几页返回后还是第几页
实现思路:跳转时将所需要的参数用$router携带参数传递过去,在跳转的页面使用beforeRouteEnter获取上个页面的路径,然后使用$router方法再携带参数传递回去
需要跳转页面的代码
data(){
return {
currentPage :1,
}
}
created(){
// 获取返回的页码
if(this.$route.params.page){
this.currentPage = this.$route.params.page
}
}
methods:{
toView(row){
//路由跳转
this.$router.push({
name: 'peopleFamily',//跳转的页面
params: {
id: row.id, // 需要的参数
page: this.currentPage // 分页的页码
},
})
}
}
跳转之后页面的代码
data() {
return {
fromPath: '', // 上个页面的路径Name
}
},
// 路由守卫
beforeRouteEnter(to, from, next) {
// 渲染该组件前调用这个钩子,因此组件还未被创建,不能获取this
next((vm) => {
vm.fromPath = from.name // vm就是this
})
},
methods: {
// 返回上一页点击事件 携带参数返回上一页
back() {
this.$router.push({
name: this.fromPath,
params: {
page: this.$route.params.page,
},
})
},
}