叮咚：✨✨✨

提升自己，比仰望别人更有意义！！！

坚定自己的方向！去开拓打磨另一个自己！！！

此文章只是自己的理解！！！不喜勿喷！喜欢就给个赞哦！！！

希望各位互相监督，共同进步！共同致富！！！

VueRouter

一，路由简介

1，vue-router 的理解

vue的一个插件库，专门用来实现SPA单页面应用

（1）生活中的路由：

（2）开发中的路由 ———— 单页面应用 SPA （single page web application）应用

（3）对SPA应用的理解

 1 - 单页面web应用（single page web application ）
 
 2 - 整个应用只有一个完整的页面index.html
 
 3 - `点击页面中的导航链接不会刷新页面， 只会做页面的局部刷新`
 
 4 - 数据需通过ajax请求获取

2，什么是路由？

一个路由就是一组映射关系key : value

key为路径， value 可能是function 或 component

3，路由分类

（1）后端路由

value 是 function ，用于处理客户端提交的请求

工作过程：服务器就收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

（2）前端路由

value 是 component , 用于展示页面内容

工作过程：当浏览器的路径发生改变时，对应的组件就会显示

二，路由基本使用

1，安装vue-router，命令 npm i router

2，应用插件： Vue.use(VueRouter)

3，编写router配置项

（1）引入VueRouter (router/index.js)

import VueRouter from 'vue-router

（2）引入组价

import XXX from '../XXX/XXX'

import XXX from '../XXX/XXX'

（3）创建router实例对象，去管理一组一组的路由规则

const router = new VueRouter({
 
 
     routes:[
   
       {
         path:'XXX',
         component:组件1
       },
       {
         path:'XXX',
         component:组件2
       }
  
  ]
 })

（4）暴露router

  export default router

4，在mian.js引入路由器，并挂载到 vm身上

import router  from 'XXX'

new Vue ({
 
  el:'#app',
  
  render:h=>h(App),
  
  `router`
  
      })

5，实现切换（active-clss可配置高亮样式）

 <router-link class="list-group-item"  `active-class="active"`to="/home">Home</router-link>

6，指定路由页面展示位置用： `<router-view> </router-view>`

7，vue-router 的注意点：

（1）路由组件通常存放在pages 文件夹，一般组件通常存放在 components 文件夹。

（2）通过切换，隐藏了的路由组件，默认是被销毁的，需要的时候再去挂载

（3）每个组件都有自己的$route 属性，里面存储着自己的路由信息

（4）整个应用只有一个 router ，可以通过组件的$router 属性获取到

三，多级路由（二级路由）

四，声明式导航及路由传参

1，query 方式携带参数（router-link + to）

to 字符串写法：

<router-link `:to="`/home/message/detail?id=${m.id}&title=${m.title}`"`>{{m.title}</router-link>

to 对象写法:

 <router-link  `:to="{
                   path:'/home/message/detail',
                   query:{
                      id:m.id,
                      title:m.title
                   } } " `> {{m.title}}</router-link>

接收参数:

  $route.query.id 
  
  $route.query.title

2，命名路由：顾名思义给路由起名字

3，params 式携带参数（router-link + to）

to 字符串写法：

<router-link  `:to="`/home/message/detail/${m.id}/${m.title}`"`> {{m.title}}</router-link>

to 对象写法：

<router-link  `:to="{
          name:'detail',
          params:{
            id:m.id,
            title:m.title
          }
        }`"> {{m.title}}</router-link>

接收参数：

  $route.params.id 
  
  $route.params.title

五，路由的 props 配置 ———— 让路由组件更加方便的接收参数

六，router-link 的 replace 属性

七，编程式导航

八、缓存组件 keep - alive

九、两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

具体名字：

  activated  路由组件  被激活时触发
  
  deactivated 路由组件失活时被触发

十、路由守卫

1，全局 ———— 前置路由守卫 beforeEach

作用： 对路由进行权限的控制

分类：全局守卫，独享守卫，组件内守卫

2，全局 ———— 后置路由守卫 afterEach

3，独享路由守卫 —— 某一个路由所单独使用的路由守卫 beforeEnter

———— 可以搭配全局后置路由守卫一起使用。

、

4，组件内路由守卫

beforeRouteEnter : 通过路由规则，进入该组件时被调用

beforeRouteLeave : 通过路由规则，离开该组件时被调用

十一、路由器工作的两种模式： history 模式和 hash 模式

（1）对于一个url 来说，什么是hash 值？

  # 号后面的内容就是 hash 值

（2）hash 值不会包含在 HTTP 请求中，所以 hash 值不会带给服务器

（3）hash 模式：

1- 地址中永远带着 # 号，不美观

2- 若以后将地址通过第三方手机APP分享，若APP校验严格则地址会被标记为不合法 

3- 兼容性较好

（4）history 模式：

1- 无#号 地址干净，美观 

2- 兼容性和hash 模式相比略差

3- 应用部署上线时需要后端人员支持，解决刷新页面服务端404问题

Vue——Router