【Vue】Vue Router 组件内的守卫

组件内的守卫

组件内的守卫 又叫 路由钩子，可以理解为页面跳转的中间件处理函数

官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB

可用的 API

提供有三个 API，这三个 API 的参数是一样的(to, from, next)=>{...}

xx(to, from, next)=>{
  // to 将要跳转到的 页面对象
  // from 跳转前的 页面对象
  // next() 不填参数表现 继续跳转d到下一个页面
    // next('/path') 改变跳转的路由
    // next(false) 返回原来的界面

}

beforeRouteEnter 进入路由时

<template>

</template>

<script>
export default {
    name:'User',
    beforeRouteEnter: (to, from, next)=> {
        console.log("进入页面");
        next();
    }
}
</script>

<style>
</style>

beforeRouteLeave 离开路由时

<template>

</template>

<script>
export default {
    name:'User',
    beforeRouteEnter: (to, from, next)=> {
        console.log("离开页面");
        next();
    }
}
</script>

<style>
</style>

beforeRouteUpdate 路由改变

<template>

</template>

<script>
export default {
    name:'User',
    beforeRouteEnter: (to, from, next)=> {
        console.log("路由改变，组件重用时");
        next();
    }
}
</script>

<style>
</style>