vue里路由钩子分为三种:
1.全局路由钩子;
2.单个路由钩子;
3.组件内路由钩子;
下面总结一下使用方法:
1》全局路由钩子是在初始化VueRouter以后,直接使用router实例进行注册;包括两个钩子: beforeEach 和 afterEach,即每个路由切换前和切换后调用。
注: 路由对象时在使用vue-router启动应用时,每个匹配的组件实例都会被注入router的对象,称之为路由对象,在组件内部可以通过this.$route 的方式调用。
路由对象包括 $route.path , $route.params, $route.query, $route.router, $route.matched等属性
router.beforeEach( (to, from, next ) => {
/** to: 即将要进入的路由对象
* from:当前正要离开的路由对象
* next:进行下一个状态,注意,一定要调用next()方法,否则路由钩子不会被resolved
*/
} )
router.afterEach( route => {
// route : 进入的路由对象
} )
2》单个路由钩子,需要在路由配置的时候直接定义。
const router = new VueRouter ({
routes: [
{
path: '/index',
component: Index,
beforeEnter: (to, from, next) => {
}
}
]
})
3》组件内钩子,这个钩子要在组件内定义。
主要有三个钩子(2.2及以下版本):
const Index = {
template: `...`,
beforeRouteEnter (to, from, next) => {
//参数的含义与全局钩子一样
//注意,此时实例还没有创建,所以不能调用组件实例this;
//可以通过给next指定一个回调的方式,来访问实例
/** next(
* vm => {} 通过参数vm来访问组件实例
* )
*
*/
//再次注意,只有这个钩子可以通过指定回调,其他的钩子都不能
},
beforeRouteUpdate(to, from, next) => {
//当前路由变化,且组件被复用时候调用 (2.2+) 如/foo/1 和 /foo/2之间切换时
//此时可以访问this
},
beforeRouteLeave(to, from, next) => {
//路由切换出该组件时调用,此时可以访问this
//可以用来禁止用户页面修改未保存时突然离开,通过next(false)来中断导航。
}
}
在路由切换的过程中,可以通过watch动态路由的变化来获取数据。
watch:{
'$route' (to, from) {
//尽情获取数据吧
}
}
路由导航顺序总结: