一、前言
本篇博客主要是总结一下vue-router，将总结一下vue-router中的常用的api。
二、认识前端路由
路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。
路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。
一、后端路由阶段
早期开发的网站，整个html是由服务器来进行渲染的，服务器直接生产渲染好对应的html页面，然后当浏览器发起请求时，后台会根据url路径来渲染页面返回给前端，前端拿到后台返回的页面数据然后进行展示。这就是后端路由，后端路由的优点：1、不需要单独加载js和css文件，有利于seo优化。缺点是：1、整个前端页面需要后台开发人员来维护。2、如果前端开发人员想要开发页面，需要通过java,php来开发。3、html代码和数据对应的逻辑混合在一起，编写和维护都非常糟糕。
二、前后端分离阶段
前后端分离阶段，就是前端一些文件放到静态资源服务器中(html + css + js)，此时后台服务器只需要提供一些api接口，前端需要请求静态资源，并且需要请求api接口，并且将接口数据渲染到静态资源文件中，然后渲染到前端。此时的好处就是前端和后端任务清晰，并且随着移动端的流行，一套后端的 api接口可以实现复用。但是目前这种模式也是不常用的(jquery开发模式)。
三、单页面复应用
单页面复应用是现在主要的开发模式，就是在一个页面渲染，当在不同的页面切换时，不会刷新页面。现在三大框架，都采用单页面复应用进行开发。如果向了解其原理可以查看单页面复应用原理
三、认识vue-router
目前前端流行的三大框架，都有自己的路由实现：
Angular的ngRouter
React的ReactRouter
vue中的vue-router
vue Router是vuejs的官方路由，他与vuejs核心深度集成，让用vuejs构建单页面应用变得更加容易。
vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中，页面的路径的改变就是组件的切换。
四、vue-router的基本使用
1、安装vue-router
npm install vue-router@4 这里我们安装的是vue-router 4.x版本。
2、配置router对象

3、在app.vue中设置

五、路由的默认路径
当我们访问网址时，此时默认是首页内容，如果我们首页没有设置对应的组件，我们想要当访问首页时，默认跳转到/home对应的页面，此时我们可以使用redirect来进行重定向。

六、history模式
vue-router中存在两种模式，一种是hash模式，一种是history模式，两种模式都需要从vue-router中进行引入，然后直接调用即可。

七、router-link
1、to属性：是一个字符串或者是一个对象。

在对象中必须使用v-bind进行数据绑定
2、replace属性

我们在router-link中添加replace属性时，如果不设置replace属性表示使用router.pushstate，如果使用replace属性表示使用router.replacestate。
3、active-class属性
我们如果不设置active-class属性时默认情况下，为router-link-active的类名，表示当活跃时展示的状态。我们可以更改类名,就是给active-class设置值。

如图所示，active-class不是精确匹配，我们给/home的router-link设置字体颜色为绿色的，当我们url地址为/home为/home/two都是可以匹配到active-class的。
4、exact-active-class

exact-active-class表示精确匹配，router-link设置的class,必须class的类名和url的地址一致。如图所示，exact-active-class所在的router-link的to属性为/home,此时url中的地址为/home才能匹配到对应的css样式，url为/home/one则无法匹配。
八、路由懒加载

上面代码中我们设置了四个路由，四个页面，但是当我们使用npm run build进行打包的时候，此时我们会发现这些页面都会打包进入app.js中（一个文件），此时当我们开发完成打包上线时，浏览器在请求资源时，一次性请求文件会很大，此时就需要分包，关于分包技术也类似于我们之前所讲的异步组件（详细内容请点击：异步组件）。

如上图所示，此时我们使用import函数，import函数返回的是一个promise。
如果我们想要对打包后的文件名进行设定，可以设置如下方式。

在import函数中设置/*webpackChunkName:"home-chunk"*/设置可以设置打包后的文件名为home-chunk

九、路由的其他属性
每一个路由对象除了上述的属性外，还存在一些其他属性，例如name属性,meta属性。如下图所示。
name属性：用来指定该路由对象独一无二的名称。
meta对象：用来自定义数据。
十、动态路由
有时候我们一些参数不一致，但仍然需要映射到同一个vue文件，此时我们可以采用动态路由来解决。

如上图所示，我们可以通过在路由配置文件中设置匹配路径，此时注意参数前面需要加上冒号，此时可以在文件中通过$route.params.id拿到对应的id。

可以在动态设置路由时，设置多个参数。

十一、NotFound页面
如果页面不匹配，则展示出NotFound组件的内容，如何设置没有匹配的路径，可以使用/:pathMatch(.*)来进行匹配，此时可以在组件中通过$route.params.pathMatch获取路径。需要注意/:pathMatch(.*)*和/:pathMatch(.*)*两者的区别。

十二、路由的嵌套
如果在路由对象中可以使用嵌套路由，只需要在路由配置中，使用children字段即可，children为一个数组。具体实现如下图所示。

十三、代码中页面的跳转

十四、query形式的参数

十五、替换当前位置
我们可以使用replace来实现替换功能

我们也可以使用router.replace()来实现替换。

十六、页面的前进后退

//js
router.go(1)  //和router.forward()相同
router.go(-1)  //和router-back()相同

router.back()  //就是history.back()
router.forward()//也就是history.forward()

十七、router-link的插槽
在vue-router的3.x版本中，我们使用tag标签来指定需要router-link展示的标签，默认标签为a标签。但是在vue-router的4.x版本中，此时我们使用插槽技术，如果对于插槽不清楚，可以查看插槽内容总结。
v-slot如何使用？
1、首先先在router-link上，加上:custom:"true"表示整个元素需要自定义。如果我们不写，这个自定义元素会被包裹在一个a标签内。
2、可以从v-slot:default="{ href, route, navigate, isActive, isExactActive }"拿到从router-link拿到的属性值。
下面我们将详细介绍一下，这些属性值的具体含义。
1、href解析后的URL。
2、route解析后的规范后的route对象。
3、navigate:触发导航的函数。
4、isActive:是否匹配。
5、isExactActive:是否精确匹配状态。

十八、router-view插槽

router-view中可以设置插槽，其中v-slot传出的值为Component也就是当前需要展示的组件。
我们可以在当前组件外层包裹transition动画组件，也可以在外层包裹keep-alive用作缓存。
十九、动态添加路由
有时候我们需要动态添加路由，比如说：用户可以访问的路由是动态的，需要我们动态的添加路由，此时我们可以使用vue-router中的一个方法——addRoute。可以添加最顶层路由，也可以添加顶层路由的子路由。具体如下所示。

二十、动态删除路由
删除路由对象存在如下方法：
1、使用一个addRoute来动态添加路由，并且保证名字相同
2、使用removeRoute来动态删除路由
3、使用addRoute的返回值进行调用来删除该路由。
方法一

方法二

方法三

二十一、路由的其他方法补充
router.hasRoute(name):判断某一个路由是否存在。
router.getRoutes()：获取一个包含所有路由的数组。

二十二、路由导航守卫
vue-router的导航守卫是通过跳转和取消来守卫导航的。存在两个参数，一个是to表示将要去的路由对象，另一个是from表示即将离开的路由对象。可以存在返回值，为true则表示直接进行跳转，为false则表示不能跳转，如果不存在返回值，默认返回undefined。可以直接返回字符串，则直接跳转的路径就是这个字符串，例如return "/home" 则直接跳转到/home所对应的页面。如果返回一个对象，可以在其中包含path,query,params等信息。

在vue2中我们是通过next进行跳转，但是在vue3中我们是直接使用return Boolean来进行跳转的，原因是因为可以防止一次跳转调用多次next函数。
下面进行一个案例（登录小案例）