前言
Vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用，vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
一、Vue-router 是什么，原理是什么?
Vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面 应用，vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起 来。
原理：传统的页面应用，是用一些超链接来实现页面切换和跳转的，在 vue-router 单页面应用中， 则是路径之间的切换，也就是组件的切换，路由模块的本质 就是建立起 url 和页面之间的映射关 系。
更新视图但不重新请求页面是前端路由原理的核心之一，目前在浏览器环境中这一功能的
实现主要有两种方式：
- 利用 URL 中的 hash（“#”）
- 利用 History interface 在 HTML5 中新增的方法
二、路由中跳转的方式
1. 方式一
<router-link to="需要跳转到页面的路径">
2. 方式二
// 跳转到指定的 url，并在 history 中添加记录，点击回退返回到上一个页
面
this.$router.push()
3. 方式三
// 跳转到指定的 url，但是 history 中不会添加记录，点击回退到上上个
页面
this.$router.replace()
4. 方式四
// 向前或者后跳转 n 个页面，n 可以是正数也可以是负数
this.$touter.go(n)
三、Vue-router 的钩子函数都有哪些?
关于 vue-router 中的钩子函数主要分为 3 类
1. 全局钩子函数
要包含 beforeEach
- beforeEach 函数有三个参数,分别是
- to:router 即将进入的路由对象
- from:当前导航即将离开的路由
- next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为 false,终止导航
2. 单独路由独享组件
- beforeEnter
3. 组件内钩子
- beforeRouterEnter
- beforeRouterUpdate
- beforeRouterLeave
总结
enjoy everyday~
