标签：vue name study stay 跳转 id 路由

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

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

标签：vue,name,study,stay,跳转,id,路由
来源： https://blog.csdn.net/a1368783069/article/details/120088951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。