路由配置文件中的钩子函数
router/index.js
我们在params路由里配置了bdforeEnter得钩子函数,函数我们采用了ES6的箭头函数,需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。
三个参数:
-
to:路由将要跳转的路径信息,信息是包含在对像里边的。
-
from:路径跳转前的路径信息,也是一个对象的形式。
-
next:路由的控制参数,常用的有next(true)和next(false)。
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import news from '@/components/news'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: '我是首页',
component:index
},
{
path: '/abount',
name: '我是消息',
component:news,
beforeEnter:function(to,from,next){//路由配置文件中的钩子函数
console.log("我进入了params模板");
console.log(to); //to:路由将要跳转的路径信息,信息是包含在对像里边的。
console.log(from);//from:路径跳转前的路径信息,也是一个对象的形式。
next(); //next:路由的控制参数,常用的有next(true)和next(false)。
}
}
]
})
写在模板中的钩子函数
在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:
-
beforeRouteEnter:在路由进入前的钩子函数。
-
beforeRouteLeave:在路由离开前的钩子函数。
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
}