Vue-router change query dynamically in navigation stepper

There is this project I’m working on and I’m stuck. I want when I click next step button the route becomes http://icontent.me/app/employer/make-order?step=1 and so on.

I’m using Vue.js and vue-router.

How do I make this happen? I have included the router.js and a screenshot if necessary.

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

// Import Routes //
import Welcome from '../components/Welcome.vue';
import Home from '../components/Home.vue';
import Admin from '../components/Admin.vue';

import HomePageContent from '../components/SectionHome/HomePageContent.vue';
import MakeOrder from '../components/Employer/MakeOrder.vue';

Vue.use(VueRouter);

export const router =new VueRouter({
   mode:'history',
   routes:[
     {
       path: '/',
       component:Welcome
     },
     {
       path: '/app/employer',
       component:Home,
       children:[
         {
           path:'',
           component:HomePageContent
         },
        {   
          path:'make-order',
          name:'make-order',
          component:MakeOrder, 
        },
       ]
     },
     {
       path:'/app/admin',
       component:Admin,
       children:[]
     },
   ]
});

next handler

methods: {
    next () {
        if (this.current == 4) {
            //call finishing method here//
            this.current = 0;
        } else {
            this.current += 1;
            //navigate route with the current step//
        }
    }

Answer

this.$router.push({ path:this.$route.path, query: { step: this.current } })

Advertisement

Answer