vue路由跳转与数据刷新

环境： Nuxt.js ，buefy

1、导航栏跳转

网站域名: http://example.com
将导航栏做成组件。点击每个栏目(home, stay, study)进行跳转，方法有多种，可以通过a标签，或者 ， 此处我采用 事件进行路由跳转：
stay 与stay 共用同一份code文件(study 下的 index.vue)，只是数据不同。

--layout
   -- home.vue
--page
  -- index.vue
  -- study
    -- index.vue

1、从home 跳转到 stay 或者 study

index.vue - http://example.com/

  goto(id, name) {
        this.activeId = categoryId;
        this.$router.push({path: '/study',query:{id: id, name:name}})
        }

跳转到页面
http://example.com/study
在study 的 created 阶段， 可以调用获取数据的函数（getData），获得数据然后渲染页面。浏览器中的URL变为： http://example.com/study?id=id&name=name

2、从study 跳到 stay

如果跳转只是按照上面的方式，将会出现： 路由跳转了http://example.com/stay?id=id&name=name，但是页面的数据还是study的数据（数据未刷新），即 getData没有被重新调用。
解决方法：
在 study/index.vue 添加路由监听：

  watch: {
    '$route' (to, from) {
      // 监听路由变化
      this.id = to.query.id;
      this.name = to.query.name;
      this.getData();
      }

这样，页面之间跳转了， 数据也正常更新了。