当 vue-router 重新打开页面时，不会调用 VueJS hook mounted()

Question

请看下面的通量，它显示了我的问题。我正在使用 vue-router 和 this.$router.push 来浏览页面。我从 PageA 开始。

• PageA -> PageB（调用 PageB 的 mounted() ）

• PageB -> PageA（回到PageA）

• PageA -> PageB（不调用 PageB 的 mounted() ）

听起来页面（.vue 组件）没有关闭并保存在缓存或其他东西上。每次打开该页面时，我都必须使用 mounted() 方法，并且可能关闭页面并从缓存中清除。我该如何解决？

原文由 Augusto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

vue 将有可能重复使用组件，这是预期的。

通常你会观察路由变化并相应地更新你的组件状态。

要对路由更改做出反应，您可以使用 beforeRouteUpdate() ：

 const Example = Vue.extend({
  template: `
  	<div>
  		<p>This changes: '{{param}}'</p>
    </div>`,
  data(){
    return {
      param: this.$route.params.param
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.param = to.params.param;
    next();
  }
});

const router = new VueRouter({
  routes: [
    {
      path: '/:param', component: Example,
    }
  ]
})
const app = new Vue({ router }).$mount('#app')

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/foo">foo</router-link><br>
  <router-link to="/bar">bar</router-link><br>
  <router-view></router-view>
</div>

或者，您也可以观察路线并相应地更新状态：

 Vue.extend({
  watch: {
    '$route'() {
      // TODO: react to navigation event.
      // params cotains the current route parameters
      console.log(this.$route.params);
    }
  },
  // ....
});

vue-router 文档有几个很好的例子： Data Fetching - Vue Router

如果你仍然想使用 mounted() ，你可以通过给你的 router-view 一个在路线改变时会改变的键，例如：

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

这将强制每次都重新创建组件，因此它确实会降低性能 - 如果可能的话，我建议使用上述路由挂钩。

原文由 Turtlefight 发布，翻译遵循 CC BY-SA 4.0 许可协议