vue 导航路由

路由独享守卫

路由独享的守卫是在 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 的浏览器中可用