vue-router 路由中的钩子

路由配置文件中的钩子函数

router/index.js 

我们在params路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。

三个参数：

1. to:路由将要跳转的路径信息，信息是包含在对像里边的。

2. from:路径跳转前的路径信息，也是一个对象的形式。

3. 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();
  }
}