VUE路由使用query方式传参时遇到的问题

Question

  <li><a v-link="{path: '/foo?page=1'}">1</a></li>
  <li><a v-link="{path: '/foo?page=2'}">2</a></li>
  <li><a v-link="{path: '/foo?page=3'}">3</a></li>

  ready: function () {
    var query = this.$route.query;
    console.log('foo.ready', query);
    this.page = query.page;
  },

第一次点击时没问题，但切换链接的时候，虽然地址栏中会改变，但并不会重新执行ready方法。

是vue-router天生就不支持还是我哪里没有处理到位？

Answer 1

ready是组件第一次初始化的时候调用，从当前组件的创建到销毁，ready方法只执行一次。

export default{
    data:{...},
    components:{...},
    ready(){...},
    methods:{...},
    //这里是重点
    route:{
        data(transition){
            console.log(this.$route.query)
        }
    }
}

参见:

1. data

2. route

Answer 2

这应该是 vue-router 1.0 吧，ready function 只执行一次，要用 data hook

Answer 3

watch: {
  '$route' (to, from) {
    console.log(to.query,from.query)
  }
}