若晨吖
2021-07-07 15:26
采纳率: 100%
浏览 165

Vue 前置路由守卫,router.beforeEach未生效

带佬们,问问为什么不生效呢?

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


import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import Vuex from '@/components/Vuex.vue'

Vue.use(Router)

const router = new Router({});

export default new Router({
  mode: 'history',
  routes: [{
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        requireAuth: true
      }
    },
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Vuex',
      name: 'Vuex',
      component: Vuex,
      meta: {
        requireAuth: true
      }
    }
  ]
})


router.beforeEach((to, from, next) => {

  console.log("111111111")
  next();

})

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • CSDN专家-微编程 2021-07-07 15:46
    已采纳
    router.beforeEach((to, from, next) => {
     
      console.log("111111111")
      next();
     
    })
    

    你放到main.js里面就好了,如有帮助,请采纳一下哦~谢谢O(∩_∩)O

    点赞 1 评论
  • 黑白猫妈 2021-07-07 15:56

    个人之见,你这个router啥也没有,是空的,export default new Router这个里面的路由跳转跟router没有关系,所以没有生效,试一下下面的

    const router = new Router({
      mode: 'history',
      routes: [{
          path: '/HelloWorld',
          name: 'HelloWorld',
          component: HelloWorld,
          meta: {
            requireAuth: true
          }
        },
        {
          path: '/',
          name: 'Login',
          component: Login
        },
        {
          path: '/Vuex',
          name: 'Vuex',
          component: Vuex,
          meta: {
            requireAuth: true
          }
        }
      ]
    });
     
    export default router
    
    router.beforeEach((to, from, next) => {
     
      console.log("111111111")
      next();
     
    })
    
    
    点赞 评论
  • 若晨吖 2021-07-12 09:00

    感谢各位,已经解决了。

    import Vue from 'vue'
    import Router from 'vue-router'
    
    import HelloWorld from '@/components/HelloWorld'
    import Login from '@/components/Login'
    import Vuex from '@/components/Vuex.vue'
    import Index from '@/components/Index.vue'
    
    // Vue.use(Router)
    
    // // const router = new Router({});
    
    // // router.beforeEach((to, from, next) => {
    
    // //   console.log("111111111")
    // //   next();
    
    // // })
    
    // export default new Router({
    //   mode: 'history',
    //   routes: [{
    //       path: '/HelloWorld',
    //       name: 'HelloWorld',
    //       component: HelloWorld,
    //       meta: {
    //         requireAuth: true
    //       }
    //     },
    //     {
    //       path: '/',
    //       name: 'Login',
    //       component: Login
    //     },
    //     {
    //       path: '/Vuex',
    //       name: 'Vuex',
    //       component: Vuex,
    //       meta: {
    //         requireAuth: true
    //       },
    //       // beforeEnter: (to, from, next) => {
    //       //   console.log("vueveuveuvuueuveuveuvueue")
    //       //   next();
    //       // }
    //     }
    //   ]
    // })
    
    
    //引入vuex仓库在路由器安置守卫进行判断使用
    import store from '../store/index.js'
    Vue.use(Router)
    
    const route = new Router({
      routes: [{
          path: '/HelloWorld',
          name: 'HelloWorld',
          component: HelloWorld,
          meta: {
            requireAuth: true
          }
        },
        {
          path: '/Login',
          name: 'Login',
          component: Login
        },
        {
          path: '/Vuex',
          name: 'Vuex',
          component: Vuex,
          meta: {
            requireAuth: true
          },
          // beforeEnter: (to, from, next) => {
          //   console.log("vueveuveuvuueuveuveuvueue")
          //   next();
          // }
        },
        {
          path: '/',
          name: 'Index',
          component: Index
        }
      ]
    })
    //每一个路由跳转之前都会走前置方法
    route.beforeEach((to, from, next) => {
      //to表示要去的路由的信息
      //from表示来自哪个路由的信息
      //next 执行next()继续走路由  next('/xxx')跳转到具体路由
      console.log(store, 'storestore')
      console.log(to.fullPath)
      //要去的路由是否需要截拦
      if (to.meta.requireAuth) {
        //判断 token 或者 user 是否存在
        if (store.state.user != '' && store.state.token != '') {
          //不为空跳转
          console.log('验证成功,用户已登录!')
          next();
        } else if (store.state.token == '') {
          console.log(store.state.token, '令牌已失效', store.state.token)
          alert("令牌已失效!"+store.state.token)
          next('/Login')
        } else {
          //账号等于空  说明没登陆 还让他留在登录页面 或者想通过路由直接跳转刀对应页面 由于没有username  也直接到了login页面
          console.log(store.state.user, '账号等于空', store.state.user)
          alert("账号未登录!"+store.state.token)
          next('/Login')
        }
      } else {
        //是登录页面
        console.log('无需截拦页面')
        next()
      }
    
    })
    export default route
    
    
    点赞 评论

相关推荐 更多相似问题