vue分页插件的思考

有这样一个需求，页面效果如下：

需求如下：

1. 查询：按条件查询，并默认分页为第一页
2. 分页：分页操作是在当前查询结果基础上进行的
3. 在查询，分页操作后，刷新页面应保持查询条件，页数，和结果

技术方案：

采用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;
    }
  }