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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    VueRouter的全局守卫,如何获取到Vue实例
    35
    0

    其实我想在beforeEach这个钩子函数里面做登录验证,而这个登录验证会调后台接口,但是这个钩子函数里面获取不到vm的实例,这样我就无法取得store里的token,也无法请求后台,折腾了一早上,实在没找到解决方法,只能请求大家指点一二

    相关代码

    Router.vue
    <script>
        import Vue from 'vue'
        import VueRouter from 'vue-router'
        Vue.use(VueRouter)
        import Api from '@/components/config/Api'
        import home from '@/pages/index'
        import login from '@/pages/login'
        import info from '@/pages/info'
    
        const router = new VueRouter({
            routes: [{
                path: '/',
                name: 'index',
                component: home
            },{
                path: '/login',
                name: 'login',
                component: login
            },{
                path: '/info',
                name: 'info',
                component: info
            }],  
        });
        
        router.beforeEach((from, to, next) => {
            this.$http.get(Api.is_login_uri,{params: {"1":this.$store.state.token}}).then(function(res){
                let code = res.data.code;
                if(code != "0"){
                    next({path:'/info',params:{"msg":res.data.data}});
                }
            },function(error){
                next({path:'/info',params:{"msg":"请求验证登录出了问题"}});
            });
        })
    
        export default router;
    </script>
    main.js的代码
    import router from './components/config/Router'
    import store from './components/config/Store'
    
    // 导入 pages 下的 Home.vue 
    //import index from './pages/index'
    
    // 创建 Vue 实例*
    var vm = new Vue({
      el: '#app',
      router,
      store,
      data(){
        return {
        }
      },
      created(){
        document.title=this.Global.appName;
      }
    })
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • SSD 普通会员 1楼

      在Vue中,全局守卫是一个特殊的方法,用于处理全局的状态。全局守卫只能在全局作用域中使用,而不能在特定的路由守卫中使用。

      如果你想要获取到Vue实例,你需要在全局作用域中使用全局守卫。这是通过使用Vue Router的useRouter方法来实现的。

      以下是一个例子:

      ```javascript import Vue from 'vue' import Router from 'vue-router'

      Vue.use(Router)

      export default { beforeEach: function (to, from, next) { console.log('This is a global hook called beforeEach') next() } } ```

      在这个例子中,我们创建了一个Vue Router实例,并在全局作用域中使用它。然后,我们在beforeEach方法中打印了一条消息,这将在每次路由切换时执行。

      如果你想要获取到特定路由守卫中的Vue实例,你需要在特定的路由守卫中使用全局守卫。这通常涉及到在路由守卫中使用this.$router来获取Vue实例。

      以下是一个例子:

      ```javascript import Vue from 'vue' import Router from 'vue-router'

      Vue.use(Router)

      export default { beforeEach: function (to, from, next) { console.log('This is a global hook called beforeEach') next() }, afterEach: function (to, from, next) { console.log('This is a global hook called afterEach') next() } } ```

      在这个例子中,我们创建了一个Vue Router实例,并在特定的路由守卫中使用它。然后,我们在afterEach方法中打印了一条消息,这将在每次路由切换后执行。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部