From e3cda5a5025bb26783fa65384d50a94eb2d1b646 Mon Sep 17 00:00:00 2001
From: cristijora <cristian.jora@corebuild.eu>
Date: Thu, 20 Apr 2017 10:36:46 +0300
Subject: [PATCH] Support vue-router integration

---
 dev/App.vue                   |  8 ++++----
 dev/main.js                   | 15 +++++++++++++++
 dist/vue-form-wizard.js       |  2 +-
 package.json                  |  3 ++-
 src/components/FormWizard.vue | 17 +++++++++++++----
 src/components/TabContent.vue |  3 +++
 6 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/dev/App.vue b/dev/App.vue
index 396bd13..d20a085 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -5,18 +5,18 @@
                 color="#e74c3c"
                 class="card">
       <tab-content title="Personal details"
+                   route="first"
                    icon="ti-user">
-        My first tab content
       </tab-content>
       <tab-content title="Additional Info"
+                   route="second"
                    icon="ti-settings">
-        My second tab content
       </tab-content>
       <tab-content title="Last step"
+                   route="third"
                    icon="ti-check">
-        Yuhuuu! This seems pretty damn simple
       </tab-content>
-
+      <router-view></router-view>
     </form-wizard>
   </div>
 </template>
diff --git a/dev/main.js b/dev/main.js
index 2e0faaf..d0ec270 100644
--- a/dev/main.js
+++ b/dev/main.js
@@ -1,12 +1,27 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import App from './App.vue'
 import FormWizard from './../src/index'
+const First = { template: '<div>First</div>' }
+const Second = { template: '<div>Second</div>' }
+const Third = { template: '<div>Third</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    { path: '/first', component: First },
+    { path: '/second', component: Second },
+    { path: '/third', component: Third }
+  ]
+})
+Vue.use(VueRouter)
 Vue.use(FormWizard)
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
+  router,
   el: '#app',
   template: '<App/>',
   components: {App}
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js
index 7aa752e..d3b5607 100644
--- a/dist/vue-form-wizard.js
+++ b/dist/vue-form-wizard.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(s){if(n[s])return n[s].exports;var i=n[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,s){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,s){var i,a=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(i=t,a=t.default);var r="function"==typeof a?a.options:a;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),s){var c=Object.create(r.computed||null);Object.keys(s).forEach(function(t){var e=s[t];c[t]=function(){return e}}),r.computed=c}return{esModule:i,exports:a,options:r}}},function(t,e,n){n(7),n(6);var s=n(0)(n(3),n(8),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.exports},function(t,e,n){var s=n(0)(n(4),n(9),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},color:{type:String,default:"#e74c3c"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},stepTitleStyle:function(){return{color:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){t<=this.maxStep&&this.beforeTabChange(this.activeTabIndex)&&this.changeTab(this.activeTabIndex,t)},beforeTabChange:function(t){var e=this.tabs[t];return!e||void 0===e.beforeChange||e.beforeChange()},changeTab:function(t,e){var n=this.tabs[t],s=this.tabs[e];return n&&(n.show=!1,n.active=!1),s&&(s.show=!0,s.active=!0),this.activeTabIndex=e,this.checkStep(),!0},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){this.beforeTabChange(this.activeTabIndex)&&(this.activeTabIndex<this.tabCount-1?(this.activeTabIndex++,this.increaseMaxStep(),this.checkStep()):(this.isLastStep=!0,this.$emit("finished")))},prevTab:function(){this.beforeTabChange(this.activeTabIndex)&&this.activeTabIndex>0&&(this.activeTabIndex--,this.isLastStep=!1)},finish:function(){this.$emit("on-complete")}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0){var t=this.tabs[this.activeTabIndex];t.show=!0,t.active=!0}this.startIndex<this.tabs.length?(this.activeTabIndex=this.startIndex,this.maxStep=this.startIndex):console.warn("Prop startIndex set to "+this.startIndex+" is greater than the number of tabs - "+this.tabs.length+". Make sure that the starting index is less than the number of tabs registered")},watch:{activeTabIndex:function(t,e){this.beforeTabChange(e)&&this.changeTab(e,t)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function}},data:function(){return{show:!1,active:!1}}}},function(t,e,n){t.exports={FormWizard:n(1),TabContent:n(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tab-wizard"},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressBarStyle})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,s){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(s)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(s),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:t.isChecked(s)?t.stepCheckedStyle:{}},[n("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?n("div",{staticClass:"icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:e.active?t.iconActiveStyle:{}},[e.icon?n("i",{staticClass:"icon",class:e.icon}):n("i",{staticClass:"icon"},[t._v(t._s(s+1))])]):t._e(),t._v(" "),!e.active&&e.icon?n("i",{staticClass:"icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():n("i",{staticClass:"icon"},[t._v(t._s(s+1))])])],1),t._v(" "),n("span",{staticClass:"stepTitle",style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[[t.displayPrevButton?n("span",{on:{click:t.prevTab}},[t._t("prev",[n("button",{staticClass:"btn btn-default btn-wd",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?n("span",{staticClass:"pull-right",on:{click:t.finish}},[t._t("finish",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():n("span",{staticClass:"pull-right",on:{click:t.nextTab}},[t._t("next",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)],t._v(" "),n("div",{staticClass:"clearfix"})],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"tab-container"},[t._t("default")],2)},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(s){if(n[s])return n[s].exports;var i=n[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,s){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,s){var i,a=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(i=t,a=t.default);var r="function"==typeof a?a.options:a;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),s){var c=Object.create(r.computed||null);Object.keys(s).forEach(function(t){var e=s[t];c[t]=function(){return e}}),r.computed=c}return{esModule:i,exports:a,options:r}}},function(t,e,n){n(7),n(6);var s=n(0)(n(3),n(8),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.exports},function(t,e,n){var s=n(0)(n(4),n(9),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},color:{type:String,default:"#e74c3c"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},stepTitleStyle:function(){return{color:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){t<=this.maxStep&&this.beforeTabChange(this.activeTabIndex)&&this.changeTab(this.activeTabIndex,t)},beforeTabChange:function(t){var e=this.tabs[t];return!e||void 0===e.beforeChange||e.beforeChange()},changeTab:function(t,e){var n=this.tabs[t],s=this.tabs[e];return n&&(n.show=!1,n.active=!1),s&&(s.show=!0,s.active=!0),this.activeTabIndex=e,this.checkStep(),this.tryChangeRoute(s),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){this.beforeTabChange(this.activeTabIndex)&&(this.activeTabIndex<this.tabCount-1?(this.activeTabIndex++,this.increaseMaxStep(),this.checkStep()):(this.isLastStep=!0,this.$emit("finished")))},prevTab:function(){this.beforeTabChange(this.activeTabIndex)&&this.activeTabIndex>0&&(this.activeTabIndex--,this.isLastStep=!1)},finish:function(){this.$emit("on-complete")}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0){var t=this.tabs[this.activeTabIndex];t.show=!0,t.active=!0,this.tryChangeRoute(t)}this.startIndex<this.tabs.length?(this.activeTabIndex=this.startIndex,this.maxStep=this.startIndex,this.tryChangeRoute(this.tabs[this.startIndex])):console.warn("Prop startIndex set to "+this.startIndex+" is greater than the number of tabs - "+this.tabs.length+". Make sure that the starting index is less than the number of tabs registered")},watch:{activeTabIndex:function(t,e){this.beforeTabChange(e)&&this.changeTab(e,t)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function},route:{type:[String,Object]}},data:function(){return{show:!1,active:!1}}}},function(t,e,n){t.exports={FormWizard:n(1),TabContent:n(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tab-wizard"},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressBarStyle})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,s){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(s)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(s),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:t.isChecked(s)?t.stepCheckedStyle:{}},[n("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?n("div",{staticClass:"icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:e.active?t.iconActiveStyle:{}},[e.icon?n("i",{staticClass:"icon",class:e.icon}):n("i",{staticClass:"icon"},[t._v(t._s(s+1))])]):t._e(),t._v(" "),!e.active&&e.icon?n("i",{staticClass:"icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():n("i",{staticClass:"icon"},[t._v(t._s(s+1))])])],1),t._v(" "),n("span",{staticClass:"stepTitle",style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[[t.displayPrevButton?n("span",{on:{click:t.prevTab}},[t._t("prev",[n("button",{staticClass:"btn btn-default btn-wd",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?n("span",{staticClass:"pull-right",on:{click:t.finish}},[t._t("finish",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():n("span",{staticClass:"pull-right",on:{click:t.nextTab}},[t._t("next",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)],t._v(" "),n("div",{staticClass:"clearfix"})],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"tab-container"},[t._t("default")],2)},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
diff --git a/package.json b/package.json
index d591773..e121e16 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "url": "https://github.com/cristijora/vue-form-wizard"
   },
   "devDependencies": {
-    "vue": "^2.2.2",
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
@@ -84,7 +83,9 @@
     "sinon-chai": "^2.8.0",
     "stats-webpack-plugin": "^0.6.0",
     "url-loader": "^0.5.8",
+    "vue": "^2.2.2",
     "vue-loader": "^11.1.4",
+    "vue-router": "^2.4.0",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.4",
     "webpack": "^2.2.1",
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index d44ccf9..72ed728 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -17,12 +17,13 @@
             <div class="icon-circle" :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
                  :style="isChecked(index)? stepCheckedStyle : {}">
               <transition :name="transition" mode="out-in">
-                <div v-if="tab.active" class="icon-container" :class="{square_shape:isStepSquare, tab_shape:isTabShape}" :style="tab.active ? iconActiveStyle: {}">
+                <div v-if="tab.active" class="icon-container" :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
+                     :style="tab.active ? iconActiveStyle: {}">
                   <i v-if="tab.icon" :class="tab.icon" class="icon"></i>
-                  <i v-else class="icon">{{index+1}}</i>
+                  <i v-else class="icon">{{index + 1}}</i>
                 </div>
                 <i v-if="!tab.active && tab.icon" :class="tab.icon" class="icon"></i>
-                <i v-if="!tab.active && !tab.icon" class="icon">{{index+1}}</i>
+                <i v-if="!tab.active && !tab.icon" class="icon">{{index + 1}}</i>
               </transition>
             </div>
             <span class="stepTitle" :style="tab.active ? stepTitleStyle : {}">
@@ -42,7 +43,7 @@
       <template>
         <span @click="prevTab" v-if="displayPrevButton">
           <slot name="prev">
-            <button type="button" class="btn btn-default btn-wd"  :style="fillButtonStyle">
+            <button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle">
               {{backButtonText}}
             </button>
           </slot>
@@ -218,8 +219,14 @@
         }
         this.activeTabIndex = newIndex
         this.checkStep()
+        this.tryChangeRoute(newTab)
         return true
       },
+      tryChangeRoute (tab) {
+        if (this.$router && tab.route) {
+          this.$router.push(tab.route)
+        }
+      },
       checkStep () {
         if (this.activeTabIndex === this.tabCount - 1) {
           this.isLastStep = true
@@ -263,10 +270,12 @@
         let firstTab = this.tabs[this.activeTabIndex]
         firstTab.show = true
         firstTab.active = true
+        this.tryChangeRoute(firstTab)
       }
       if (this.startIndex < this.tabs.length) {
         this.activeTabIndex = this.startIndex
         this.maxStep = this.startIndex
+        this.tryChangeRoute(this.tabs[this.startIndex])
       } else {
         console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)
       }
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index 4f707b1..98f8a0b 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -26,6 +26,9 @@
        */
       beforeChange: {
         type: Function
+      },
+      route: {
+        type: [String, Object]
       }
     },
     data () {