如何重置Vue.js中的所有组件

Question

当路由更改时，我正在尝试重新启动组件：

  beforeRouteUpdate (to, from, next) {
    Object.assign(this.$data, this.$options.data())
      console.log(to.query);
      next();
    } 

但它不起作用； 它只打印console.log。 我也尝试过this.$options.data.call(this)并apply 。

Answer 1

为了在更改路由查询时强制Vue重新呈现相同的组件，可以为它安装到的<router-view分配一个key ，并将<router-view推送到具有相同路由名或路径的页面。

例：

安装点：

<router-view
  :key="$route.fullPath"
/>

组件导航（假设路线名称为blog

<router-link :to={ name: 'blog', query: { count: 10 } }>Link to the same route</router-link>

这是假设您要在导航到具有不同数据的相同页面组件时重置页面组件的数据。

如果要重置的组件不是路径组件，则可以在保存原始数据的同时使用watch选项重置其数据。

例：

data () {
  return {
    initialData: {
      //  some initial data
    },
    data: {}
  }
},
watch: {
  '$route.fullPath': {
    immediate: true, // Immediate option to call watch handler on first mount
    handler () {
      this.resetData()
    }
  }
},
methods: {
  resetData () {
    this.data = Object.assign({}, this.initialData)
  },
},

注意，可以观察任何$route选项，并通过next和previous参数将附加条件添加到处理程序中。

Answer 2

试试这个。$ router.reload（）