Vue路由守卫

概述

```js

const router = new VueRouter({ ... }

//前置的钩子函数 最后要执行next（）才会跳转

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

  // ...

})

//后置的钩子函数 已经跳转了不需要next

router.afterEach((to, from) => {

  // ...

})

```

 

主要是简单介绍一下，路由守卫主要用于检验是否登录了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都用请求的全局拦截来做了。大致了解一下路由守卫即可

代码

new Vue({

           el:'#app',

           router,

           template:`

              <div>

                  <router-view></router-view>

              </div>

           `,

           data(){

              return {

     

              }

           },

           methods:{

           },

           mounted(){

              //利用路由守卫做当跳转首页时可直接跳转，跳转其他页面要等待两秒才可以跳转

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

                  console.log(to)

                  if(to.path=='/nav/index'){

                     next()

                  }else{

                     setTimeout(function(){

                            next()

                     },2000)

                  }

              })

           }

          

       })

运行效果

 

 

利用路由守卫做当跳转首页时可直接跳转，跳转其他页面要等待两秒才可以跳转