(十)路由中的钩子函数

本节知识点

• 路由中的函数生命周期

使用指南

• 有两种方式

• 第一种就是在路由配置文件里面写钩子函数只有一个就是beforeEnter

• 第二种就是在模板里面写钩子函数他有两个 beforeRouterEnter beforeRouterLeave

先说第一种 路由里面写配置

找到路由文件 index.js里面

 {
      path: '/',
      name: 'HelloWorld',
      components: {
        default: HelloWorld,
        left: Hi1,
        right: Hi2,
      }
    },
beforeEnter:(to,from,next)=>{
console.log("我进来了");\
console.log(to);
console.log(from);
}

• 三个参数

to 路由将要跳转的路径信息，信息是包含在对象里面的
from 路径跳转前的路径信息，也是一个对象的形式
next 路由的控制参数。常用的next(true)和next(false)

我们再来说说第二种模板里面的钩子函数

• beforeRouterEnter:在路由进去前的钩子函数
• beforeRouterLeave:在路由离开的钩子函数

 export default {
      name:"Hi2",
      data(){
         return {
           message2:"这个就是Hi2页面"
         }
      },
beforeRouterEnter:(to,from,next){
  console.log("我进来了")
}.
beforeRouterLeave:(to,form,next){
  console.log("我离开了")
}
    }