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();
      }

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

上一篇:学霸的秘密


下一篇:问题记录——springbean注入失败导致的空指针异常