持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
全局路由在前面讲过了没有看的可以去看看
路由独享守卫
路由独享的守卫是在routes配置的路由对象中直接定义的beforeEnter守卫。beforEnter守卫只在该组件上生效，在全局前置守卫调用之后，在进入路由组件之间调用。
代码如下：
const routes = [ {
path: '/news',
component: News,
beforeEach:(to,from,next)=>{
}
}]
组件内守卫
组件内守卫有三个：beforeRouteUpdate守卫、beforeRouteEnter守卫、beforRouteLeave守卫
守卫使用代码如下：
export default {
name: 'new',
data() {
return {
}
},
beforeRouteEnter(to, from, next) {
next((vm) => {
})
},
beforeRouteUpdate(to, from, next) {
},
beforeRouteLeave(to, from, next)
{
}
}
beforeRouteEnter守卫：在渲染该组件的路由被确认之前调用.
注意：
beforeRouteEnter守卫不能通过this来访问组件的实例。因为在守卫执行前，组件实例还没有被创建，vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
beforeRouteUpdate守卫：在当前路由改变，但是该组件被复用时调用
对于一个带有动态参数的路由 /news/:id，在/news/1和/news/2之间跳转的时候相同的news组件实例将会被复用，而这个守卫就会在这种情况下被调用
可以访问组件实例的this
beforeRouteLeave守卫：导航即将离开该组件的路由是调用，可以访问组件实例的this
导航解析流程
完整的导航解析流程：
导航被触发。
在失活组件里调用beforeRouteLeave守卫
调用全局的beforeEach守卫
在重用的组件里调用beforeRouteUpdate守卫
调用路由配置的beforeEnter
解析异步路由组件
在被激活的组件里调用beforeRouteEnter
调用全局的beforeResolve守卫
导航被确认
调用全局的afterEach钩子
触发DOM更新
用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
滚动行为
router实例提供一个scrollBehavior方法，该方法内返回一个滚动位置对象，指定新页面的滚动位置。
代码如下：
const routes = [ {
path: '/news',
component: News,
scrollBehavior(to, from, savedPosition) {
if(savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
}]
scrollBehavior方法接收to和from路由对象，savedPosition仅在浏览器得前进/后退按钮·触发时才可用
注意
scrollBehavior方法实现的功能只在支持history.pushState的浏览器中可用
