vue - Vue路由（扩展）

忙里偷闲，还在学校，趁机把后面的路由多出来的知识点学完

十.缓存路由组件

让不展示的路由组件保持挂载，不被销毁

在我们的前面案例有一个问题，都知道vue的路由当我们切换一个路由后，另一个路由就会被销毁，如果我在一个路由写了有一些input框

当我切换到另一个组件message很明显这个时候news里面的内容就会丢失，毕竟都被销毁了，以前说过的专门用来保存旧dom的$el这些都会被销毁，而再挂载的时候没有可以复用的就会直接生成新的DOM，所以当我们切换回来就是一个全新的input框

那么有没有办法能够解决这个问题，毕竟类似于这样的情况，大多数都是能够记住input里面的内容切换回来也还是这样

用到一个全新的标签将我们的 input所在的组件的router-view标签加入到里面去

注意这里面可以写一个属性include，不写的话就默认所有这里展现的路由组件都会缓存，但是没得这个必要，其他组件没有input，也不需要缓存的话，可以加include属性值为 那个组件的name既可以专门缓存这一个组件的内容

缓存多个路由组件，将include动态绑定，然后写一个数组的形式

十一.两个新的生命周期钩子

像我们上面的案例接着来，如果我添加了一个news组件里面的内容，让他的opacity动态变化

这个时候你会发现，就算你切走了，还是在输出，因为根本没有销毁，一直挂载起的，这个时候这样一直挂载起又有点没有必要了，因为我都看不到那边的情况，就算你帮我缓存数据，我也看不到，更没必要一直给我开启定时器

两个全新的而且只有路由能用的钩子：一个是 activated 当前这个路由组件被激活时被调用的生命周期钩子，一个是deactivated是路由组件失活时被调用，所以这个时候调用这两个钩子比mounted和brforeDestroy要好得多

十二.路由守卫

1.全局前置路由守卫

添加一个需求，前面的案例当我切换home和about正常切换，但是切换home里面的message和news的时候需要权限，也就是好像一个守卫一样守着这个关卡认证不对不会给你放行。

比如我在localStorage放入一个user，只有当user为admin的时候才可以点击news和message

全局体现在哪，体现在我是对整个router进行的设置。

这个守卫需要放在router，所以在配置文件里面不能直接导出，前置体现在哪？一个路由的方法 .beforeEach,意思是在每一次切换之前，她在两种情况下调用，一个是每一次切换之前，一个是初始化的时候，注意是切换之前，也就是刚好点击切换但是还没切换过去这一个节点，他会接受三个参数，to是你点击要去的路由组件，from是你来自于哪个组件，还有一个next也是必须要写的，所有的点击切换路由组件，都会被这个守卫拦截到，如果不写next的话，就不会给你放行所以就实现不了切换

既然拿到了这些参数，那就可以做一些判断了，只有当我们想要访问news或者message才会去继续判断你的user是否是admin，如果都满足才会执行next，如果不是切换的这两个组件，该放行的就放行

但是这样写也不好，就像那个path地址，虽然也可以写 to.name，但是如果要十多个路由组件都需要鉴权呢？在我们每一个$route里面有一个属性 meta它是一个对象，叫做路由元信息，他就是专门用来存放一些我们自定义的数据的，我们可以把需要鉴权的路由组件都添加一个这个配置项，统一为isAuth值为true，我们守卫判断的时候判断这个是否为true就可以了

2.全局后置路由守卫

它的触发事件首先也是初始化的时候，还有一个就是切换完后进行触发。

因为都已经切换完了，也没什么事情可以做了，所以这个守卫一般用的也比较少，有一种情况需要用到这个守卫，就是当我们单击了一个路由组件后，我们的网页标题会出现一些与之相关的title，需要在每一个路由组件的meta路由元信息添加各自的标题

如果用前置来做也可以做，点击谁显示谁的title，如果有就显示，但是根目录没有用异或语法显示后一个

但是这样还是有一个bug，就是初试化才进来的时候还是有一瞬间显示的是你index定义的title，所以为了彻底应该在index把title改了

但是用前置做就很麻烦，为了不出现bug还要写两次，而路由就很简单了，直接 afterEach，并且它的参数 只有两个to，from，因为都已经切换完了也不需要继续放心做什么了，他就只需要在里面写上我们换标题的语句，因为所有的验证都已经在前置路由守卫做完了，到后置了说明已经过鉴权了，直接换就可以了

3.独享路由守卫

顾名思义就是一个路由组件独享的路由守卫，怎么来触发，除了初始化之后，就是当我切换进设置的这个路由组件之前，配置在这个路由配置项里面 beforeEnter ,他也跟前置守卫一样有三个参数

可以跟全局后置配合换title，但是要注意独享路由守卫没有 后置

4.组件内路由守卫

顾名思义写在组件里面的路由守卫，就不写在router配置文件里面了。

分别是 beforeRouteEnter通过触发规则进入该组件被触发 beforeRouteLeave通过路由规则离开这个路由守卫时触发，为什么一定是通过路由规则，只有当router匹配的完成的切换才会被触发，如果是当一般组件直接导入使用组件标签的这种组件不会被触发，当你想单独对这个路由组件来点业务逻辑可以在这里，跟独享路由守卫一样的，但是区别于前值和后置，而且改名还是要配合全局后置才能完成

十三.history与hash模式

• 区别一： 也就是我们浏览器上的的路径，hash是带#的，history不带#要好看一点

怎么来切换呢，直接修改router配置文件，一个配置项 mode：为你想要的模式

• 区别二：history比hash兼容性略差

• 区别三：项目上线问题

  假如我现在用的history模式想要项目上线了，首先要执行run serve build将项目打包，打包好的文件需要服务器环境才能上线展示创建一个独立的环境，node初始化，然后导入express，通过express内置中间件static，将我们的项目静态资源挂载上去

  部署上线后会发现，确实路径挺好看，正常点也没问题

  

  但是当你刷新后，就会报错

  

  为什么会找不到这个请求，一般出现这个问题，都是找不到服务器里面这个路径的资源或者一些语法错误，这里的问题就是如果用的history模式，当你刷新的时候就会触发网络请求，去服务器请求这个路径的资源，但是服务器根本没有这个路径，所以就会报错，归根结底还是因为用的history模式错把后面的路径当成了请求地址

  同样的操作，我用hash打包来测试，刷新就不会这样，因为#后面的不会通过http带给服务器，就算你刷新发起的网络请求还是根路径，也就是你静态托管出来的资源地址

  

当然想要用history模式并且能分别出谁是路由匹配的路径，谁才是真正的服务器路径也可以，只是针对于node服务器，可以下载第三方包：connect-history-api-fallback

然后导入并且一定要在静态托管之前注册即可