vue-cli中路由守卫beforeEach基础使用方法

关于vue-cli中路由守卫beforeEach基础使用方法

在vue-cli中router是直接被全局注册的

可以在app.vue中使用mounted钩子,console.log(this),查到vue原型中的$指令及相关方法如下图:

 

在app.vue中写入全局路由守卫

<script>
export default {
    mounted(){
           this.$router.beforeEach((to, from, next) => { //to:即将前往的页面,from:从哪个页面来,next:下一步操作
             if (to.matched.some(res => res.login)) {  //判断是否登录
                  next()
             }else {
                  alert("请先登录")
                  next({path: '/login'})
             }
        })
    }   
}
</script>

以上是beforeEach用法及三个参数,并且beforeEach会在路由切换前触发,上面实例只是举个例子,具体看实际情况而定