携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天
一、vue-router
vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起 url 和页面之间的映射关系。
“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：利用 URL 中的 hash（“#”）利用 History interface 在 HTML5 中新增的方法
二、路由之间是跳转
1.
2.this.$router.push()跳转到指定的 url，并在 history 中添加记录，点击回退返回到上一个页面
3.this.$router.replace()跳转到指定的 url，但是 history 中不会添加记录，点击回退到上上个页面
4.this.$touter.go(n)向前或者后跳转 n 个页面，n 可以是正数也可以是负数
三、vue-router路由守卫
路由守卫为：
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter
四、vue-router钩子函数
关于 vue-router 中的钩子函数主要分为 3 类
1.全局钩子函数要包含 beforeEach
beforeEach 函数有三个参数,分别是:
to:router 即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed（确认的）否则为 false,终止导航。
2.单独路由独享组件
beforeEnter
3.组件内钩子
beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave
五、路由传值的方式
Vue-router 传参可以分为两大类，分别是编程式的导航 router.push 和声明式的导航
1.router.push
字符串：直接传递路由地址，但是不能传递参数
this.router.push({name:"news",params:{userId:123})
查询参数 和 name 配对的式 params，和 path 配对的是 query
this.router.push({path:"/news',query:{uersId:123})<br>
接收参数 this.route.query
2.声明式导航
字符串 <router-link to:"news">
命名路由 <router-link :to:"{name:'news',params:{userid:1111}}">
查询参数
