有这样一个需求，页面效果如下：
需求如下：
- 查询：按条件查询，并默认分页为第一页
- 分页：分页操作是在当前查询结果基础上进行的
- 在查询，分页操作后，刷新页面应保持查询条件，页数，和结果
技术方案：
采用vue组件和vue-router；
页面分为两个组件，分页是一个组件，其他的整体是一个；
路由分了两个，一个根路由，一个查询／分页路由；
const routes = [ { path: '/', name: 'root', component: agent }, { path: '/query/:id/:name/:cityId?/:page', name: 'query', component: agent }, ];
问题
页面刷新要保持页数，就要将page传递到分页组件中来初始化，如下：
props:{
currentOut: {
type: Number,
default: 1
}
}`
// 页面刷新时需要保存当前所在的页面
data() {
return {
current: this.currentOut
};
},
另外，页面中除了点击分页数字进行翻页外，其他操作也会变相进行分页操做，这时问题就出现了，满足这个需求我一开始想到如下操作，这也是vue官方推荐的方法单向数据流：
computed: {
'current' : function () {
return this.currentOut;
}
}
但是在一个组件中，data和computed中不能有重名的变量，如何是好？
方法：
不在computed中监听current变化，而是在watch中监听currentOut的变化
watch{
'currentOut': function (newValue) {
this.current = newValue;
}
}