关于vuejs组件模板的缓存问题

Question

我用vue在做一个订单增删改查的功能，列表页，详情页，新增页，修改页这些都是独立的路由，我用vue-router管理他们的跳转。

现在的问题是在列表页，点击add到新增页面，在新增页面中的表单的某个input框中输入了内容，然后点击back，返回到列表页，这个时候再次点击add到新增页面，原来输过内容的input框中是有内容的。

/list -> /add (编辑了表单) -> /list -> /add (缓存了编辑后的表单)

我的add组件和template是这么写的：

/*add.js order add component*/
var Vue = require('vue');
var addTemplete = require('html!./add.html');

var orderAdd = Vue.extend({
  template: addTemplete,
  data: function() {
    return {
      orderDetail: {}
    }
  },
  route: {
    data: function() {
      // 即便在这里每次进add路由把orderDetail设置成空也没用
      return {
        orderDetail: {}
      }
    }
  }

})

/*add.html template*/
<form class="content">
  <input type="text" name="customer" value={{orderDetail.customer}}>
</form>

所以想请教下，如何在路由每次进入页面后，将template和data给reset了？

Answer 1

route: {
    data: function({next}) {
    
      this.orderDetail = {}; //每次进入后 重置数据
      //这里return 没用的吧
      next(); //执行下一个路由钩子函数
    }
  }

Answer 2

vue-router有一个可配置项叫can-reuse，vue-router的官方文档里面有，楼主可以去看看，可以解决路由组件被reuse的问题

Answer 3

data: function() {
      // 即便在这里每次进add路由把orderDetail设置成空也没用
      
        this.orderDetail = {}
     
    }