Vue路由守卫

最新推荐文章于 2024-09-06 15:08:44 发布

原创最新推荐文章于 2024-09-06 15:08:44 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文介绍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)

                  }

              })

           }

          

       })