路由：根据用户请求路径的不同渲染不同的页面或者传递不同的数据
前端路由：根据用户请求的路径渲染不同的组件(前端路由不会经过服务器) 页面进行切换的时候是不会进行刷新的
后端路由：根据用户请求路径的不同渲染不同的页面(ssr后端渲染 ejs)或者传递不同的数据 接口
当使用路由的时候会多出来两个内置组件
<router-view></router-view> 组件的渲染
<router-link></router-link> 路径的跳转
to:路由跳转的路径 需要跟routes中的path做匹配
tag:会将router-link渲染成哪个标签
路由的配置项
mode:"hash" history 当前路由的一种形式
routes:每一个路由的配置项
path:"当前用户请求的路径" **代表匹配所有(注意匹配所有这个选项必须要放在路由的最下面)
component:当路径匹配成功后所渲染的组件
redirect:重定向
children:路由嵌套 它就相当于一个小型的routes
meta:路由元信息
props:路由解耦
name:路由的名称
路由的传值
1、动态路由传值
1-1：在配置路径的时候通过/:属性 来配置需要传递参数的属性名称 例如:path:"/details/:id/:name"
1-2: 在做路由跳转的时候传递需要传递的数据 例子 :to="'/details/'+item.goodsId+'/'+item.goodsName"
1-3：在组件内部通过this.$route.params来进行接收传递的参数
2、query传值
2-1: 在做路由跳转的时候路径通过query传值的方式进行拼接
2-2: 在组件内部通过this.$route.query进行接收
3、路由解耦(只适合动态路由)
3-1、在定义路由的时候设置属性props为true
3-2、在组件内部通过接收外部属性的方式接收路由传递过来的数据
路由跳转的方式
1、<a href="#/路径"></a>
2、<router-link></router-link>
3、编程式导航 (利用js进行叶面的跳转)
路由守卫 路由钩子函数
1、用户行为的一个拦截
局部守卫
beforeRouteEnter 进入路由时
使用的场景：
1、检测用户是否登陆
2、判断城市
3、判断权限
4、热力图
前端埋点
进入路由前的一个守卫，注意在这个钩子函数中是访问不到this的指向的
to:到哪里去
from:从哪里来
next：执行下一步
如果需要获取到this的则在next中的回调函数中可以拿到当前vm的实例
beforeRouteUpdate 当路由发生变化的时候
当路由方生了改变，但是当前组件没有经历创建和销毁的时候需要进行使用
同时也可以使用watch进行$route的属性监听
beforeRouteLeave 当离开路由的时候
场景：
1、支付
2、退出登陆
3、跳转第三方页面
4、答题系统
全局守卫
beforeEach
全局验证
场景：
1、设置title值
2、用户登陆验证
.....