vuejs如何刷新当前路由？

Question

如题，当我点击开单成功后，我该如何初始化这个组件？就是回到刚进来的状态？
这里东西比较多，我不想去找对应绑定值然后清空，一开始就想到这种方式来做 this.$router.push('/#')，
但是然并卵，没有用。

Answer 1

看你的UI，用的应该是element吧？element中对form表单有一个重置方法，就是清空数据和判断条件的。resetFields()方法可以了解一下。调用该方法后，会使表单恢复成初始值。

<template>
  <div>
    <el-form :model="formData" ref="formData" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号码"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="onReset" type="primary">重置</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData:{
          name:'',
          mobile: ''
      }
    }
  },
  methods:{
    onReset(){
        this.$refs['formData'].resetFields();
    }
  }

}
</script>

输入内容后：

点击重置后：

Answer 2

好问题，百度后学习了。
https://www.zhihu.com/questio...

如果单纯的想重新初始化特定的组件，可以在父组件中用 v-if 进行控制。

<div>
  <child-comp v-if="showChild"></child-comp>
</div>

// 在父组建中
refreshChild() {
  this.showChild = false;
  setTimeout(() => {
    this.showChild = true;
  }, 0);
}

Answer 3

组件最外层加ref 通过ref清空

Answer 4

你所有的绑定值应该写在一个对象里，开单成功后直接清空对象不就回到初始值了么

Answer 5

你使用this.$router.go(0)不行吗？
我一般这么写

this.$message('开单成功！')


setTimeout(() => {
  this.$router.go(0)
}, 500)

也可以使用

this.$nextTick( () => {
this.$router.go(0)
})

感觉用着很爽啊!

Answer 6

经检测，可以刷新当前路由。

this.$router.go(0);