before/after hooks

Author: yyx990803

example/example.js

@@ -4,12 +4,11 @@ var VueRouter = require('../src')
 Vue.use(VueRouter)
 
 var router = new VueRouter({
-  pushstate: true,
+  // pushstate: true,
   root: '/hello'
 })
 
 var root = new Vue({
-  el: '#app',
   components: {
     inbox: {
       template: '<div><h2>inbox!</h2><router-view></router-view>',
@@ -51,22 +50,30 @@ var root = new Vue({
 
 router.map({
   '/inbox': {
-    name: 'inbox',
     component: 'inbox',
+    before: function (to, from) {
+      console.log('before')
+      console.log(to.path, from && from.path)
+      if (from && from.path === '/about') {
+        alert('not allowed')
+        return false
+      }
+    },
+    after: function (to, from) {
+      console.log('after')
+      console.log(to.path, from && from.path)
+    },
     subRoutes: {
       '/message/:messageId': {
-        name: 'message',
         component: 'message',
         alwaysRefresh: true
       },
       '/archived': {
-        name: 'archive',
         component: 'archive'
       }
     }
   },
   '/user/:userId': {
-    name: 'user',
     component: 'user',
     subRoutes: {
       'profile/:something': {
@@ -92,4 +99,5 @@ router.redirect({
   '/info': '/about'
 })
 
-router.start(root)
+router.start(root)
+root.$mount('#app')

src/index.js

@@ -1,5 +1,5 @@
 var Recognizer = require('route-recognizer')
-var hasPushState = history && history.pushState
+var hasPushState = typeof history !== 'undefined' && history.pushState
 
 /**
  * Router constructor
@@ -17,6 +17,7 @@ function VueRouter (options) {
   this._currentPath = null
   this._notfoundHandler = null
   this._root = null
+  this._hasPushState = hasPushState
   var root = options && options.root
   if (root) {
     // make sure there's the starting slash
@@ -94,15 +95,20 @@ p.redirect = function (map) {
  * be resolved against root (if provided)
  *
  * @param {String} path
+ * @param {Object} [options]
  */
 
-p.go = function (path) {
+p.go = function (path, options) {
   if (this._pushstate) {
     // make it relative to root
     path = this._root
       ? this._root + '/' + path.replace(/^\//, '')
       : path
-    history.pushState({}, '', path)
+    if (options && options.replace) {
+      history.replaceState({}, '', path)
+    } else {
+      history.pushState({}, '', path)
+    }
     this._match(path)
   } else {
     path = path.replace(/^#!?/, '')

src/view.js

@@ -33,26 +33,48 @@ module.exports = function (Vue) {
     },
 
     onRouteChange: function (route) {
+      var previousRoute = this.currentRoute
       this.currentRoute = route
+
       if (!route._matched) {
         // route not found, this outlet is invalidated
         return this.invalidate()
       }
+
       var segment = route._matched[route._matchedCount]
       if (!segment) {
         // no segment that matches this outlet
         return this.invalidate()
       }
+
       // mutate the route as we pass it further down the
       // chain. this series of mutation is done exactly once
       // for every route as we match the components to render.
       route._matchedCount++
       // trigger component switch
-      if (segment.handler.component !== this.currentComponentId ||
-          segment.handler.alwaysRefresh) {
-        // TODO: handle before/after hooks
-        this.currentComponentId = segment.handler.component
-        this.update(segment.handler.component)
+      var handler = segment.handler
+      if (handler.component !== this.currentComponentId ||
+          handler.alwaysRefresh) {
+        // call before hook
+        if (handler.before) {
+          var beforeResult = handler.before(route, previousRoute)
+          if (beforeResult === false) {
+            if (route._router._hasPushState) {
+              history.back()
+            } else if (previousRoute) {
+              route._router.go(previousRoute.path)
+            }
+            return
+          }
+        }
+        this.currentComponentId = handler.component
+        // actually switch component
+        this.realUpdate(handler.component, function () {
+          // call after hook
+          if (handler.after) {
+            handler.after(route, previousRoute)
+          }
+        })
       } else if (this.childVM) {
         // update route context
         this.childVM.route = route
@@ -61,7 +83,7 @@ module.exports = function (Vue) {
 
     invalidate: function () {
       this.currentComponentId = null
-      this.update(null)
+      this.realUpdate(null)
     },
 
     // currently duplicating some logic from v-component
@@ -96,6 +118,7 @@ module.exports = function (Vue) {
 
     unbind: function () {
       this.unwatch()
+      component.unbind.call(this)
     }
 
   })