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

查看:108
本文介绍了javascript - 关于vuejs组件模板的缓存问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

我用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了?

解决方案

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

这篇关于javascript - 关于vuejs组件模板的缓存问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆