title: this.$route.params is empty in app.vue when building site global navigation (outside of router-view)
body: <p>I have vue setup and working fine, I can route to pages, and they are shown correctly in the router-view component. I can access this.$route.params.xyz in the components within the page, however, when trying to access in a component, such as the global navigation, the params collection is empty.</p>
  
  <p>The current route URL is localhost:5011/forum/2/details where the 2 is an id value. I can access the 2 happily on the page for some local routing, but I wanted a settings page, to be available on the global menu.</p>
  
  <pre><code>{
    title: 'Forum Settings ',
    icon: 'mdi-cogs',
    text: 'Forum Settings ' + this.$route.params.id,
    route: {
      name: 'ForumSettings',
      params: {
        id: this.$route.params.id
      },
    },
  },
  </code></pre>
  
  <p>However, params is {} and id is undefined. </p>
  
  <p>How can I make this work?</p>
  
  <p>route.js:</p>
  
  <pre><code>{
      path: '/forum/:id/settings',
      name: 'ForumSettings',
      component: ForumSettings,
      meta: {
          authorize: true,
      },
  },
  </code></pre>
  
  <p>on the page itself as a test:</p>
  
  <pre><code>&lt;dr-btn
      text="Settings"
      :to="{ name: 'ForumSettings', params: {id: this.$route.params.id}}"
  &gt;
      &lt;v-icon&gt;mdi-cog&lt;/v-icon&gt;
  &lt;/dr-btn&gt;
  </code></pre>
  
  <p>This works fine.</p>
  
  <p>in the app.vue:</p>
  
  <pre><code>mounted() {
      console.info('Mounted Router', this.$route);
  },
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZvAcy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZvAcy.png" alt="Chrome console output of this.$route"></a></p>
  
  <p>This is not the current URL, so it seems the router isn't setup at this point. How can it be achieved to get the forum id for the current route (if it is on another page, the settings link will be hidden, so if actually no id, then no menu item)</p>