title: How to get back button to trigger route guard if only parameter in route changes in Vue.js
body: <p>I have the following route:</p>
  
  <pre><code>{ name: 'items', path: 'items/:id', component: () =&gt; import('pages/Childitems'), props: true}
  </code></pre>
  
  <p>If I browse to this route, then all router guards and component hooks are triggered normally, e.g. </p>
  
  <p><code>http://localhost:8081/items/1</code><br>
  <code>http://localhost:8081/items/57</code><br>
  <code>http://localhost:8081/items/58</code></p>
  
  <p>The above sequence of addresses works fine - all expected router hooks, such as <code>beforeUpdate</code> and <code>updated</code> are triggered. </p>
  
  <p>However if I use the browser's back and forward buttons to reach those URLs, then those hooks are not triggered.</p>
  
  <p>Here is the component code: </p>
  
  <pre><code>export default {
      name: 'items',
      created: function() {
          console.log('items/:id hook – created');
      },
      beforeMount () {
          console.log('items/:id hook beforeMount');
      },
      mounted () {
          console.log('items/:id hook mounted');
      },
      beforeUpdate () {
          console.log('items/:id hook beforeUpdate');
      },
      updated () {
          console.log('items/:id hook updated');
      },
      activated () {
          console.log('items/:id hook activated');
      },
      beforeDestroy () {
          console.log('items/:id hook beforeDestroy');
      },
      destroyed () {
          console.log('items/:id hook destroyed');
      },
      beforeRouteEnter (to, from, next) {
          console.log('update items beforeRouteUpdate');
      },
      beforeRouteUpdate (to, from, next) {
          console.log('update items beforeRouteUpdate');
      },
      beforeRouteLeave (to, from, next) {
          console.log('update items beforeRouteUpdate');
      }
  }
  </code></pre>
  
  <p>How can I get them to trigger? Or what hook can I use for the forward and back buttons?</p>