路由的拦截（导航守卫）

*初级小白*~

于 2021-11-18 00:10:20 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vagrant echarts 前端

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/121369411

vue 专栏收录该内容

36 篇文章

订阅专栏

本文深入探讨了前端路由的拦截机制，即导航守卫。详细介绍了如何使用Vagrant配置开发环境，并结合Echarts展示动态数据加载过程中的路由控制策略，确保页面跳转的安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//路由拦截（导航守卫：前置导航守卫和后置导航守卫）
//前置守卫：
//三个参数：to 代表即将进入的路由   from 代表即将离开的路由  next() 每一个导航守卫至少搭配一个next()
router.beforeEach((to,from,next)=>{
  //想要进购物车页面，必须有token
  console.log('to',to);
  console.log('from',from)

  //获取token
  let token=localStorage.getItem('token')
  if(to.path=='/cart'){
    //此时必须要有token
    if(token){
      next() //这个next()是争对购物车的
    }else{
      alert('请先登录')
    }
    return
  }
  next() //这个next()是适配所有的路由
})