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重新呈现相同的组件，可以为其安装的'plugins': ['@babel/plugin-proposal-class-properties']}]分配一个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) }, },选项，并通过next和previous参数将附加条件添加到处理程序中。

Answer 2

尝试 this。$ router.reload（）

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

2 个答案: