title: Vue-Router Programmatically Open Modal
body: <p>I have a login page that I will re-direct to if a user is not authenticated (via the meta tag auth), and conversely if a user is logged in, will get redirected to home if he/she tries to visit the login page (via the meta tag guest).  The authenticated state is stored in Vuex:</p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
    if (to.matched.some(m =&gt; m.meta.auth) &amp;&amp; 
      !store.state.auth.authenticated) {
    // If user is not authenticated, redirect to login page
      next({
        name: 'Login',
      })
    } else if (to.matched.some(m =&gt; m.meta.guest) &amp;&amp; 
      store.state.auth.authenticated) {
    // If user is authenticated and on guest page, redirect to home
      next({
        name: 'Home',
      })
    } else {
      next()
    }
  })
  </code></pre>
  
  <p>What I would like to do is make my login page a modal instead of a landing page.  I've been able to make a login modal and have it appear when clicking on a button, but is there a way to have vue-router automatically display the modal if a user attempts to go to a link that requires authentication instead of going to a dedicated landing page?</p>