VUE2 学习笔记18 路由守卫

路由守卫

有时候，并不是所有的导航区都可以随意点击，需要具备某些权限，才能看到某些导航区对应的展示区。比如，希望用户在未登录的情况下，无法访问个人中心。这种效果可以通过路由守卫实现。

路由守卫在VueRouter的实例对象上，通过beforeEach调用，beforeEach在每一次路由切换之前都调用一次beforeEach内部设置的函数。

假设VueRouter实例为router，在路由配置文件中，通过router.beforeEach配置全局前置路由守卫。全局前置路由守卫在页面初始化、及每次路由切换前被调用。

全局前置路由守卫router.beforeEach

beforeEach内部设置一个函数，这个函数有三个参数：to from next

to：将要跳转去的目标路由的信息

from：目前页面的路由信息

next：放行，调用next后，页面才会跳到to页面。如果不调用next，无法完成跳转，也就是说，页面的跳转会被拦截。

当路由配置过多时，可能需要在beforeEach中写过多判断逻辑，这时可以给路由配置添加标识属性，在beforeEach中，通过对标识进行判断，来分析是否放行。

这个标识配置在meta配置项中，meta的value是一个对象，对象中以key:value的形式存放要保存的数据。在to from $route 等存储路由信息的结构上，meta数据可以通过.meta.key获得。

全局后置路由守卫router.afterEach

afterEach的参数和beforeEach类似，也有to from，且携带的信息和beforeEach一致，但是后置路由守卫中没有next。

afterEach在页面初始、页面被切换之后调用。

在后置路由守卫中，可以写一些路由放行后需要执行的逻辑。

独享守卫beforeEnter

有时候，不需要在所有的路由跳转时都进行守卫逻辑的判断，通过独享路由守卫，可以为某一个路由配置当前路由独享的守卫。

独享守卫配置在routes配置项中，独享前置路由守卫用beforeEnter配置，独享路由守卫没有后置路由守卫。

当页面从其他路由向配置了独享守卫的路由跳转时，会触发beforeEnter，beforeEnter的配置函数和beforeEach是一样的。

组件内路由守卫

路由守卫也可以不在配置文件中写，可以写在组件中的script标签中，配置beforeRouteEnter函数，以及beforeRouteLeave函数。

beforeRouteEnter函数在通过路由规则，进入组件时调用。beforeRouteLeave函数在通过路由规则离开组件时调用。

beforeRouteEnter和beforeRouteLeave与全局守卫不同，触发的时机并不是按跳转前后的逻辑进行的，而是进入之前（beforeRouteEnter），进入之后，组件内并没有路由守卫的逻辑，在离开之前调用beforeRouteLeave。

beforeRouteEnter和beforeRouteLeave的参数为to from next。

而且，这两个函数在通过路由规则进入或离开时才会触发，如果是通过引入组件标签等非路由规则引起的组件变化，无法触发这两个函数。在beforeRouteEnter中可以进行权限校验等。

Vue项目路由模式

hash模式

hash值反应在URL中，通过/#/标识，/#/及后面的部分就是hash值。

在前端和后端交互时，hash值不会随着HTTP请求发送给后端服务器。

在配置路由文件时，如果不进行设置，默认是hash模式。

history模式

在new VueRouter的配置中，通过mode配置路由模式，默认模式是hash，如果想切换到history模式，要把mode设置成history。

history模式下，没有/#/标识，也没有hash值。

history模式和hash模式对比：

从路径美观的角度考虑，history模式下的URL确实比hash模式的URL更优美。但hash模式的兼容性更好，在一些旧浏览器中也可以生效，history的兼容性比起hash略差，但是也只是相对来说。除此之外，路由模式还影响项目上线的配置。上线，指项目写完之后，放在服务器上部署，让用户可以访问。前端项目部署时，需要把前端项目通过webpack等打包方式，打包成HTML、JS、CSS文件部署。在Vue项目中，一般通过npm run build对项目进行打包。

打包好的文件需要在服务器上部署才能查看，在本地无法查看。

node.js搭建一个小服务器让页面能显示：npm init 

npm i express

在server.js文件下，通过const express = require('express')引入express

通过const app = express()创建一个服务实例，通过app.listen(服务器端口，服务器启动回调函数)来对服务器端口和启动进行配置；通过app.get(后端路由，匹配成功回调)来处理前端请求。

这样配置之后，就搭建好了一个很简易的服务器。

通过node server启动服务器。通过:端口/后端路由，可以访问后端服务器获取数据。

当项目部署时，需要把前端的静态资源（打包好之后生成的HTML、CSS、JS）放在后端服务器目录下，一般放在static或者public文件夹下。

在后端服务器中通过app.use(express.static(静态文件路径))配置静态文件。

当访问服务器地址时，就可以显示配置好的静态资源。默认显示静态资源下的index.html。

但是，由于前端路由和后端路由是不一样的，当刷新前端页面时，如果前端使用的是history模式，前端页面发送网络请求，后端服务器会把前端URL当做资源请求地址去匹配，导致页面无法正常显示。但如果前端使用的是hash模式，由于hash模式后面的hash值不会发送给服务器，因此在hash模式下不会由于刷新导致错误。

在使用history模式时，如果想要在项目部署时，后端服务器不会把前端URL当做后端路由，需要在后端服务器通过配置解决。

解决方式多种多样，其中一种，是后端服务器可以通过一个中间件connect-history-api-fallback，来对URL进行判断。

在后端通过npm i 进行下载，引入之后，在配置静态资源之前使用，就可以解决后端服务器无法判断前端路由和后端路由的问题。

UI组件库

有很多针对Vue的成型的组件库，移动端主流的UI组件库有Vant、Cube UI、Mint UI等。网页端主流的UI组件库有element-ui、IView UI等。

UI组件库的使用并没有很多技巧，在使用时，按照官网文档教程进行使用就可以了。