18、vue.js 之路由钩子函数

路由钩子函数：实际上是在加载之前处理一些事情，

用node加webpack开发  项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <ul>      <li><router-link to="/">index</router-link></li>      <li><router-link to="/about">about</router-link></li>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about    <router-view></router-view>  </div>`,  // 触发事件(模板显示到页面前触发)  beforeRouteEnter (to, rfom, next) {    // 到哪里去，从哪里来，是否往下加载模板    console.log(arguments)    // 执行next()就往下加载模板    next()  }}const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  // 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about',      name: 'about',      component: about,      // 触发事件（在访问这个网址之后，加载模板之前触发）      beforeEnter (to, rfom, next) {        // 到哪里去，从哪里来，是否往下加载模板        // console.log(arguments)        // 执行next()就往下加载模板        next()      }    }  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

说明：

钩子函数里的3个值的具体值