路由是前端非常重要的部分，那么在使用vue开发中也是必不可少的。vue router官方文档详细的介绍的关于router的一些功能和用法。这里呢我简单的记录下，在真实项目中，基于vue-cli3构建工具下，router 和 router.beforeEach的搭配使用。
在讲之前呢，我们先简单了解一下beforeEach。
constrouter=newVueRouter({...})
router.beforeEach((to,from,next)=>{// ...})
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
了解更多可参考官方文档
在前端路由跳转中，路由跳转前都是会经过beforeEach，而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。常见的使用场景有：1、验证用户是否登录（若未登录，且当前非登录页面，则自动重定向登录页面）；2、用户权限；3、用户输入的路路径是否存在，不存在的情况下如何处理，重定向到哪个页面。此处呢我使用一个简单的例子：当用户输入的路径不存在的情况下，将其重定向到‘/’路径来说明beforeEach是如何控制路由的。话不多说，直接看下边如何实现的（这里我以创建一个名为router-be的项目为例）。
一、基本环境搭建
1、在node环境下安装vue-cli3
npm install @vue/cli
2、创建一个名为router-be的项目（这里我是用的是默认配置，只有babel和eslint）
vue create router-be
3、安装vue-router
cd router-be
npm install vue-router
到这里，我们基本东西都构建好了，接下来就是本文的重点
二、新增vue页面和router.js
1、创建文件
在src目录下我们新增一个名为views文件夹和router.js，views文件夹里面存放3个vue文件，分别为Home.vue、Login.vue、Page1.vue，这3个页面是为了区分路由跳转用的，页面内容很简单，主要是能够区分具体是那个页
2、编辑router.js
3、在main.js注册路由，且通过router.beforeEach控制路由
这里需要注意两个点，第一、当用户输入的页面不存在时我们统一跳转到根路径（'/'路径），所以必须要判断（if(to.path == '/'){ next() }），不然当我们直接访问根路径时会陷入死循环，导致页面无法显示；第二、一定要在Vue里边注册路由，否则路由无效的。
4、打开App.vue，去掉原来的无关代码，添加<router-view/>，以达到根据路由显示相应内容的目的
三、最终效果
四、总结
这里详细的介绍了如何在vue-cli3中使用router，以及如何利用router.beforeEach将不存在的路径重定向到'/'路径下。总结下也就4步：1、安装vue-router;2、编辑项目存在路由；3、将路由挂在到Vue；4、使用router.beforeEach进行路由拦截。
好了，今天的内容就分享到这里了，希望能够对你有所帮助，若有不准确或不正确的地方也欢迎指正哦。
