Vue-Router 以编程方式打开模态框

Question

我有一个登录页面，如果用户未经过身份验证（通过元标记身份验证），我将重定向到该登录页面，相反，如果用户已登录，如果他/她尝试访问登录页面，我将重定向到主页（通过元标记 guest）。经过身份验证的状态存储在 Vuex 中：

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth) && 
    !store.state.auth.authenticated) {
  // If user is not authenticated, redirect to login page
    next({
      name: 'Login',
    })
  } else if (to.matched.some(m => m.meta.guest) && 
    store.state.auth.authenticated) {
  // If user is authenticated and on guest page, redirect to home
    next({
      name: 'Home',
    })
  } else {
    next()
  }
})

我想做的是将我的登录页面设置为模态页面而不是登陆页面。我已经能够制作一个登录模式并在单击按钮时显示它，但是如果用户尝试访问需要身份验证的链接而不是访问，有没有办法让 vue-router 自动显示模式专门的登陆页面？

Answer 1

如果我理解正确，你可以在状态管理中调用突变（我认为使用 Vuex）来打开模型对话框登录表单

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth) && 
    !store.state.auth.authenticated) {
  /* If user is not authenticated,
     make action/mutation to the store to open a dialog  
  */
    store.commit('openLogInDialog')
    next(false)
  } else next()
})