Vue router keep-alive and mounted behavior

Question

I had some logic in the mounted() method before I started using <keep-alive>. For instance: document.title = this.title. Now the title changes upon the first load only.

I could listen for route changes, but it won't work when you land on the page.

What is the proper way to detect loading of another component in <keep-alive>?

Answer 1

Move your logic to the activated lifecycle hook, which is called whenever a keep-alive component is activated.

For example:

new Vue({
  ...
  activated: function() {
    document.title = this.title;
  },
  ...
});