我们知道一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。
路由配置文件中的钩子函数
我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码：
{ path:'/params/:newsId(\\d+)/:newsTitle', component:Params, beforeEnter:(to,from,next)=>{ console.log('我进入了params模板'); console.log(to); console.log(from); next(); },
我们在params路由里配置了beforeEnter的钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。
三个参数：
to:路由将要跳转的路径信息，信息是包含在对象里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
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(); } } </script>
这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。
内置组件slot
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
先来定义一个组件，这个组件用来显示博主的一些信息。
我们在Vue构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）
data:{ jspangData:{ bolgUrl:'http://jspang.com', netName:'技术胖', skill:'Web前端' } },
我们用<template></template>标签的方式定义了组件：
<template id="tmp"> <div> <p>博客地址：</p> <p>网名：</p> <p>技术类型：</p> </div> </template>
我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。
slot的使用需要两步：
1、在HTML的组件中用slot属性传递值。
<jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang>
2、在组件模板中用标签接收值。
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>网名：<slot name="netName"></slot></p> <p>技术类型：<slot name="skill"></slot></p> </div> </template>
我们贴出这个案例的全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Slot content extend Demo</title> </head> <body> <h1>Slot content extend Demo</h1> <hr> <div id="app"> <jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang> </div> <template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>网名：<slot name="netName"></slot></p> <p>技术类型：<slot name="skill"></slot></p> </div> </template> <script type="text/javascript"> var jspang={ template:'#tmp' } var app=new Vue({ el:'#app', data:{ jspangData:{ bolgUrl:'http://jspang.com', netName:'技术胖', skill:'Web前端' } }, components:{ "jspang":jspang } }) </script> </body> </html>
