《Vue》导航守卫与《React》编程式路由导航

一.导航守卫：监听一个页面从一个地方跳转到另一个地方。

导航守卫分为：全局守卫、路由独享的守卫和组件内的守卫。

1）全局守卫：

全局守卫包括前置钩子和后置钩子，分别是跳转前进行调用和跳转后进行调用。

前置钩子：beforeEach((to,from,next)=>{})

后置钩子：afterEach((to,from)=>{})

2）路由独享的守卫：

beforeEnter((to,from,next)=>{})，只有进入当前组件时，才会显示beforeEnter中的内容。

3）组件内的守卫

组件内的守卫包括：

beforeRouteEnter((to,from,next)=>{})   在进入组件前调用

beforeRouteUpdate((to,from,next)=>{})   在更新组件前调用

beforeRouteLeave((to,from,next)=>{})   在离开组件前调用

二.编程式路由导航

编程式路由导航通过this.props.history的API实现了页面的跳转，前进，后退等功能。

1）this.props.history.push()   此方法的参数路径可以加params、search和state参数

2）this.props.history.replace()   此方法的参数路径可以加params、search和state参数

3）this.props.history.goBack()

4）this.props.history.goForward()

5）this.props.history.go(2)   代表前进2步