vue-cli3之router 和 router.beforeEach妙用

        路由是前端非常重要的部分，那么在使用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个页面是为了区分路由跳转用的，页面内容很简单，主要是能够区分具体是那个页

目录结构

Home.vue页面

Login.vue页面

Page1.vue页面

2、编辑router.js

3、在main.js注册路由，且通过router.beforeEach控制路由

        这里需要注意两个点，第一、当用户输入的页面不存在时我们统一跳转到根路径（'/'路径），所以必须要判断（if(to.path == '/'){ next() }），不然当我们直接访问根路径时会陷入死循环，导致页面无法显示；第二、一定要在Vue里边注册路由，否则路由无效的。

4、打开App.vue，去掉原来的无关代码，添加，以达到根据路由显示相应内容的目的

修改App.vue

三、最终效果

访问根路径

访问login页面

访问page1页面

访问其它不存在的路径（自动重定向了根路径，也就home页面）

四、总结

        这里详细的介绍了如何在vue-cli3中使用router，以及如何利用router.beforeEach将不存在的路径重定向到'/'路径下。总结下也就4步：1、安装vue-router;2、编辑项目存在路由；3、将路由挂在到Vue；4、使用router.beforeEach进行路由拦截。

        好了，今天的内容就分享到这里了，希望能够对你有所帮助，若有不准确或不正确的地方也欢迎指正哦。