button link to other component on the same path file vue 2

33 views Asked by At

i want this button go to specific component(InProgressList.vue) while having the same path /payroll/process

Inside PayrollEdit.vue:

<a-button type="primary" @click="$router.push('/payroll/process')" >Confirm</a-button>

I have a steppers component named PayrollProcess.vue. In this component there's link to other component which is InProgressList and when I clicked the btn above it will go to InProgressList.

    <template>
      <div>
        <a-steps :current="current" @change="onChange" style="margin-bottom: 30px;">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-content" style="padding: 0%;">
              <component :is="steps[current].content"></component>
        </div>
        <div class="steps-action">
          <a-button v-if="current < steps.length - 1" type="primary" @click="next">
            Next
          </a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="$message.success('Processing complete!')"
          >
            Done
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
            Previous
          </a-button>
        </div>
      </div>
    </template>

<script>
export default {
    name: "PayrollPending",
    components: { PageLayout, NewList, InProgressList, ContextSelector, DoneList },
data() {
        return {
            current: 0,
            steps: [
                {
                    title: 'New',
                    content: NewList ,
                },
                {
                    title: 'In-Progress',
                    content: InProgressList ,  // the confirm button will go this component
                },
                {
                    title: 'Done',
                    content: DoneList,
                },
            ],
        };
    },
    methods: {
        next() {
            this.current++;
        },
        prev() {
            this.current--;
        },
        // function click dekat step
        onChange(current) {
            // console.log('onChange:', current);
            this.current = current;
        },
    },
}
</script>

I've tried to link to with path /payroll/process but it will go to NewList component instead of InProgressList. I've tried link btn directly in config.js like this

config.js:

{
  path: "process",
  meta: {
   icon: "setting",
  },
  component: () => import("@/pages/payroll/PayrollProcess"),
  children: [
        {
          path: "",
          component: InProgressList,
        },
      ],
},

But it will show on navbar too which is I don't want it to appear on navbar and it will be different path.

0

There are 0 answers