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

Question

我有一个登录页面，如果用户未通过身份验证（通过元标记 auth），我将重定向到该页面，相反，如果用户已登录，将被重定向到主页，如果 he/she 尝试访问登录页面（通过元标记来宾）。经过身份验证的状态存储在 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()
  }
})

我想做的是让我的登录页面成为模态页面而不是登陆页面。我已经能够制作登录模式并在单击按钮时显示它，但是如果用户尝试转到需要身份验证的 link，是否有办法让 vue-router 自动显示模式而不是转到专门的目标网页？

Answer 1

如果我没理解错的话，你可以在你的状态管理中调用 mutation（我认为你使用 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()
})

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

Vue-Router Programmatically Open Modal

vue.js

vue-router

vuejs2