vue当前页面路由点击不刷新

Question

用vue写的项目，编辑和新增都是一个页面，只是默认带不带出数据的差别
但是在写完编辑的功能的时候发现，点击编辑进入页面后，在点击菜单上的提交单据，页面不刷新，还是有编辑的时候带出的数据，效果如图：

点击菜单之后，上面的路径已经变了，但是页面的数据还在，没有刷新，效果如图：

在网上查资料，有人说在路由的中加入t: new Date()可以刷新，但是我写了也没好用，代码如下

this.$router.push({
    name: routename,
    query: {
        t: new Date()
    }
});

希望有经验的人能帮忙指点下，谢谢

根据 学会微笑老哥 建议修改 页面和组件代码如下

菜单页配置路由

···
<ul v-for="litem in item.children">
   <li :class="{'chil-active': isChilActive ===litem.flag}" @click="getName(litem.flag, litem.path)" class="dropdown-item">{{litem.txt}}
   </li>
</ul>
···
<script>
···
   watch: {
    // 方法1
    $route(to, from) {
      //监听路由是否变化
      alert(1)
      this.$router.push({ name: routename });
    }
  },
  methods: {
    getName(No, routename) {
      if (routename === "logout") {
        window.logout();
      } else {
        this.$router.push({ name: routename });
      }
      this.$store.commit("setStep", 0);
      this.isChilActive = No;
    }
  }
···
</script>
···

编辑和提交页路由配置

···
created() {
    this.demandcode = this.$route.query.demandno;
    if (this.demandcode !== undefined) {
        // 字段赋值
    }
}
···

触发编辑路由

// 编辑单据
editNeeds(params) {
  console.log(params)
  if (params.row.demand_type === 0) {
    this.$router.push({
      name: "tollstep_1",
      query: {
        demandno: params.row.demand_code,
        edit: 1
      }
    });
  } else if (params.row.demand_type === 1) {
    this.$router.push({
      name: "gratisstep_1",
      query: {
        demandno: params.row.demand_code,
        edit: 1
      }
    });
  } else {
    this.showErrMag("无效的单据（缺少单据类型）");
  }
}

Answer 1

https://segmentfault.com/a/11...
我文章 第一条