vue3中7种路由守卫的使用大全举例

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

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

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

router.afterEach((to,from)=>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->})

router.beforeResolve((to,from,next)=>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->})

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

export default {
  setup() {},
  mounted(){
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
  },
//  组件内守卫
beforeRouteEnter(to ,from , next){
    // next() 可以通过内部的回调函数访问实例
     // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    window.console.log(this) // undefined
    window.console.log(to)
    window.console.log(from)
    next((e)=> {
        window.console.log(e) // 当前的this
    })
},
beforeRouteUpdata(to ,from){
    // 无 next 
     // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    window.console.log(this)
    window.console.log(to)
    window.console.log(from)
},
beforeRouteLeave(to ,from){
    // 无 next
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    window.console.log(this)
    window.console.log(to)
    window.console.log(from)
},
}