Vue-router 在导航步进器中动态更改查询

Question

我正在处理这个项目，但我陷入了困境。我希望当我单击下一步按钮时，路线变为http://icontent.me/app/employer/make-order?step=1 等等。

我正在使用 Vue.js 和 vue-router。

我该如何做到这一点？如有必要，我已包含router.js 和屏幕截图。

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:[]
     },
   ]
});

下一个处理程序

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

Answer 1

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