前端路由与 vue-router

什么是前端路由
对于前端路由来说，路由的映射函数通常是进行一些 DOM 的显示和隐藏操作。这样，当访问不同路径的时候，会显示不同的页面组件。前端路由主要有两种实现方案： Hash 路由和 History API 路由。 Hash 路由以"＃号加路径名"的方式，将路由添加到 URL 地址末尾。 History API 路由就是通过浏览器提供的 History API 实现路由的跳转，可以实现直接将路由路径追加到浏览器名末尾。下面了解一下这两种路由的使用方式。
1.Hash
早期的前端路由的实现就是基于 location . hash 来实现的。其实现原理也很简单， loca - tion . hash 的值就是 URL 中＃后面的内容。例如下面这个网站，它的 location . hash ='# me ':http://127.0.0.1#me
此外， Hash 路由也存在下面个特性。
 URL 中的 Hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时， Hash 部分不会被发送。

 vue - router 的基本用法
路由，其实就是指向的意思，当点击页面上的 Home 按钮时，页面中就要显示 Home 的内容，如果点击页面上的 About 按钮，页面中就要显示 About 的内容，这可以说是一种映射。所以在页面上有两个部分：一个是点击部分；一个是点击之后显示内容的部分。
点击之后，怎么做到正确的对应，例如，点击 Home 按钮，页面中怎么就正好能显示 Home 的内容。这就要在 JavaScript 文件中配置路由。
路由中有三个基本的概念 route , routes , router 。
(1) route 是一条路由，由这个英文单词也可以看出来，它是单数， Home 按钮＝> home 内容，这是一条 route , About 按钮＝> About 内容，这是另一条路由。
(2) routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[| Home 按钮＝> Home 内容|,| About 按钮＝> About 内容|]。
(3) router 是一个机制，相当于一个管理者，它来管理路由。因为 routes 只是定义了一组路由，它放在那里是静止的，当真正来了请求，怎么办？就是当用户点击 Home 按钮的时候，怎么办？这时 router 就起作用了，它到 routes 中去查找，去找到对应的 Home 内容，所以页面中就显示了 Home 内容。
客户端中的路由，实际上就是 DOM 元素的显示和隐藏。当页面中显示 Home 内容的时候， About 中的内容全部隐藏，反之也是

vue - router 的高级用法
 vue - router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单地说，导航守卫是指，在路由正在发生改变的过程中，通过跳转或取消跳转的方式控制导航。
导航守卫分为全局的、单个路由独享的及组件内的三种，下面分别进行介绍。
1．全局的
前置守卫：使用 router . beforeEach 注册一个全局前置守卫。
 const router = new VueRouter ({...))
 router . beforeEach (( to , from , next )=>(
//...
(1) to ：即将要进入的目标路由对象。
(2) from ：当前导航正要离开的路由对象。

(3) next ：调用该方法来 resolve 这个钩子。
 next (）进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
 next ( false ）中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。 next ('/'）或者 next (| path :'/'))：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
 next ( error ):(2.4.0+）如果传人 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router . onError (）注册过的回调。
2．单个路由独享的
在路由配置上直接定义 beforeEnter 守卫：

这样定义的守卫是该路由独享的，只有进入该路由时才会执行这个守卫。其参数与全局前置守卫的方法参数是一样的。

完整的导航解析流程（执行顺序）如下所示。
(1）导航被触发。
(2）在激活的组件里调用离开守卫。
(3）调用全局的 beforeEach 守卫。
(4）在重用的组件里调用 beforeRouteUpdate 守卫（2.2+)。
(5）在路由配置里调用 beforeEnter 。
(6）解析异步路由组件。
(7）在被激活的组件里调用 beforeRouteEnter 。
(8）调用全局的 beforeResolve 守卫（2.5+)。
(9）导航被确认。
(10）调用全局的 afterEach 钩子。
(11）触发 DOM 更新。
(12）用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。