账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-router设置全局登录拦截的问题。
    26
    0

    vue-router如何在导航守卫中调用一个组件?

    官网上的登录拦截是跳转到一个固定的页面,比如

    // 判断是否需要登录权限 以及是否登录
    router.beforeEach((to, from, next) => {
      if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限
        if (judgingLogon()) { // 判断是否登录
          next()
        } else { // 没登录则跳转到登录界面
          next({
            path: '/login',
            query: { back: to.query }
          })
        }
      } else {
        next()
      }
    })

    这样可以实现需要登录时跳转到对应的登录页面,但是现在在点击某个需要登录的导航时,是弹出登录框,登录框组件已经写好了,问题是:如何在beforeEach里控制这个登录组件的data呢?也就是在所有需要登录的页面都会弹出一个登录框,而且这个登录框可以由用户点击【登录】按钮时触发。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 去你的大芭乐## 普通会员 1楼

      在Vue Router中,我们可以通过配置beforeEach钩子来设置全局登录拦截。这个钩子会在Vue实例加载时被调用,我们可以在这里处理全局登录相关的逻辑。

      下面是一个简单的例子:

      ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home.vue' import Login from '@/components/Login.vue'

      Vue.use(Router)

      export default new Router({ routes: [ { path: '/login', component: Login, beforeEach: (to, from, next) => { // 在这里处理全局登录相关的逻辑 console.log('Before login') next() }, }, { path: '/home', component: Home } ] }) ```

      在这个例子中,我们在Login组件的beforeEach钩子中处理了全局登录相关的逻辑。当用户访问/login页面时,我们会在控制台打印一条消息,表示用户已经登录。

      需要注意的是,Vue Router中的beforeEach钩子并不是所有路由都需要。如果你只需要在某个特定路由上设置全局登录拦截,那么你可能不需要在beforeEach钩子中处理逻辑。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部