vue导航守卫

Posted 2020-12-26 goff-mi

三部分

1. router（VueRouter实例）守卫 -- 全局路由守卫
2. router守卫 -- 路由守卫
3. component守卫 -- 组件守卫

---

• const router = new Router({})
• router.beforeEach(function (to,from,next) {} //
• export default router

    router.beforeEach(function (to,from,next) {
      // console.log(to,from)
      if(to.name == ‘blog‘) {
        if(to.matched[0].meta.is_login) {
          next()
        }else{
          console.log("login")
          next({name: ‘login‘})
        }
      }else if(to.name == ‘login‘) {
        if(to.matched[0].meta.is_login) {
          next({name: from.name})
          console.log(from)
        }else {
          next()
        }
      }else {
        next()
      }
    })
    <template>
        <button @click=‘login‘>LOGIN</button>
    </template>
    <script>
    export default {
        created() {
            // console.log(this.$route)
        },
        methods: {
            login() {
                // console.log(this.$route)
                this.$route.matched[0].meta.is_login = true;  //
                this.$router.push({name: ‘blog‘})  //
            }
        }
    }
    </script>

 

---

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: ‘/login‘,
      name: ‘login‘,
      component: Login,
      meta: {
        index: 3,
        is_login: true
      },
      beforeEnter(to,from,next) {
        // console.log(to,from)
        if(to.meta.is_login) {
          next({name:from.name})
        }else{
          next()
        }
      }
    }
  ]
})

router.beforeEach(function (to,from,next) {
  // console.log(to)
  if(to.name == ‘blog‘) {
    if(to.matched[0].meta.is_login) {
      next()
    }else{
      // console.log("login")
      next({name: ‘login‘})
    }
  }else if(to.name == ‘login‘) {
    if(to.matched[0].meta.is_login) {
      next({name: from.name})
      // console.log(from)
    }else {
      next()
    }
  }else {
    next()
  }
})

export default router

3.

未完待续

---