首先让我们回顾一下导航守卫。
官网：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。官方文档
简单来说：导航守卫就是一个房子的保安，如果想要进入房子，要告诉保安从哪里来(from)，到哪里去(to)，如果你是陌生人，那保安不能随便放你进去，你要得到房子主人的允许(登录，注册)，才可以去你要去的地方，然后保安告诉你接下来怎么做(next())。如果房子主人允许你进入，那你就可以直接进去。
那接下来看看我们要实现的效果：
当我们点击商品列表的作者时，会跳到作者详情页，但是此时用户没有登录，所以会直接跳到登录页面。当我们点击图片时，会进入商品详情页，此时用户可以不用登录，这个情况下，有些路由需要登录，有的不需要，此时要判断，那么这个时候就可以用到导航守卫。代码如下：
1.配置路由
需要登录状态的页面要添加login：true属性，比如说作者详情页
不需要登录状态的页面要可以不添加login：true属性，比如说商品详情页
2.导航守卫
此时就可以完成我们想要的效果。
PS: 有需求的页面一定要记得加login：true属性，否则你导航守卫岂不是白写！！(别问我是怎么知道的)
是不是很简单，快动起你的小手手敲敲试试吧！
版权声明：本文为oo_ring原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。