路由一、路由分类路由是一组key-value映射关系前端路由理解：value是组件Component，用于展示页面

一、路由分类

路由是一组key-value映射关系

前端路由
- 理解：value是组件Component，用于展示页面
- 工作过程：浏览器路径改变时，就会实现对应的组件
后端路由
- 理解：value是函数function，用于处理客服端请求数据
- 工作过程：服务器接收到一个请求时，根据请求路径来匹配，调用对应的函数，并返回响应的数据

二、基本路由

跳转之后，之前的路由组件是被销毁了

路由跳转：<router-link></router-link> —— 手动实现跳转
- router-link最终转换为a标签
- to='/home'属性 —— 跳转路径
- active-class='active'属性可以设置高亮状态
- 浏览器历史记录的产生（前进后退） —— 栈结构保存
```
  - replace='true' —— 替换
  - 默认push模式 —— 追加方式 —— 压栈：默认指向最上面的记录
```
路由组件视图展示：<router-view></router-view>
- router-link最终转换为a标签
嵌套路由-
- 多级路由时，二级以上对的子路由都不需要在path：的时候加+'/',在遍历的时候，路由自己会加上，否则会出错
- router-link to跳转时，path要写完整='父+子路由的path'
- router-link最终转换为a标签
路由传参
- 接受参数： —— $route接受参数
- params：在路由规则中用占位符占位 path:'home/:id/:name' 字符串 :to=path/params参数 对象 :to={ name:'', params:{} }
- query：字符串或对象形式
```
   字符串 :to=`path?query参数`
   对象 :to={
                path:'', //或者name:'',
                query:{}
                }
```
- 命名路由：路由规则里面添加配置项 —— name:''
路由route的props配置：
- 可以用于接收路由组建传递的参数
- 有时可以简化 this.$router.replace this.$router.replace('path')
编程式导航：不用router-link，更灵活 —— 自动跳转
- this.$router.push('path'),也可以携带参数
- this.$router.replace(name:'home'，query:{})
缓存路由组件：keep-alive
- 缓存单个路由组件：<keep-alive incloude="组件名"> <router-view></router-view> </keep-alive>
- 缓存多个路由组件：<keep-alive incloude="['News','Home','组件名']"> <router-view></router-view> </keep-alive>
- actived() —— 组件激活状态
- deactived() —— 失活状态

三、路由钩子 —— 路由守卫

全局前置路由守卫 —— 路由每次切换之前

 router.beforeEach((to,from,next)=>{
     to       //到那个组件去
     from     //从那个组件来
     next()   //放行
 })
 
 
 补充：路由源信息 —— 在meta:{}配置一个标识
       if判断的路由组件太多的情况下 —— 可以给要做权限验证的路由组件的路由源信息里面添加标识，最后在路由守卫里面判断 简化避免多个组件鉴权放行时 “与条件”

全局后置路由守卫 —— 路由每次切换之后
```
 router.afterEach((to,from)=>{
     to       //到那个组件去
     from     //从那个组件来
 })
```
前置路由守卫也可以document.title=to.meta.title||'xxx系统'，但要注意时机，而且写多次，每次放行之前都需要，不然会出现title修改但是没有放行进不去组件仍停留在原页面的情况

独享路由守卫是routes里面配置项，对某个配置了的组件单独生效，其余的和路由前置守卫一样，就是使用的位置不同

 beforeEnter((to,from,next)=>{
     to       //到那个组件去
     from     //从那个组件来
     next()   //放行
     if(判断){
         next()   //判断通过走next
     }
 })

组件内守卫 —— 通过路由规则（点击改变路由路径）进入和离开，和前置守卫用法一样

 1.路由进入之前 
 beforeRouterEnter((to,from,next)=>{
     to       //到那个组件去
     from     //从那个组件来
     next()   //放行
 })
 
 2.路由离开之后
 beforeRouterLeave((to,from,next)=>{
     to       //到那个组件去
     from     //从那个组件来
     next()   //放行
 })

四、路由模式

模式配置：mode：hash/history

1. hash模式

优点：

兼容性好
hash值 —— 在http请求过程中不会被服务器包含其中带去请求，不会造成刷新出现404的问题
hash值 —— hash模式下只是初始路径去请求，每一次跳转是通过前端路由的切换匹配来实现页面的展示

缺点

不优雅
如果地址通过第三方手机App分享，若检验严格的话，地址会被标记不合法

2. history模式

优点：

优雅

缺点：

兼容性不太好

在页面跳转之后刷新会出现404问题

解决：
    1.node.js的后端 —— 安装一个 connect-history-api-fallback 的中间件并注册使用
    2.nginx反向代理 —— 
    3.后端处理 ——

五、上线

1.node.js环境： 调用一个express的处理静态资源中间件static history模式的话需要用一个connect-history-api-fallback的中间件

hash模式下

history模式下

2.nginx环境部署

3.java环境部署
可以通过调用自己的类库中的一些方法解决