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的浏览器中可用