[Vuejs]-How to implement the navigating action of right click menu in Vue?

by

0👍

✅

Vue-router makes sense to use if your actions demand a full screen. Otherwise, you can use a simple dialogue. But if you don’t want to consider each action as a separate page, I see two options:

Option 1: You can use full-screen dialogues: you can show them without changing the route.

Option 2: You can use alternative navigation component that navigates without routes. It’s not necessary to use it for the whole app. You can use it only for the page where you call all your actions. For example, take a look at v-ons-navigator from Onsen UI. It doesn’t use routes, but a stack:

// Go to the "main" page by Vue-router and use v-ons-navigator inside to navigate 
// between actions.

<template id="main">
  <v-ons-navigator swipeable
    :page-stack="pageStack"
    @push-page="pageStack.push($event)"
  ></v-ons-navigator>
</template>

<template id="page">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Page</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      This is the page
      <v-ons-button @click="push">Action!</v-ons-button>
    </p>
  </v-ons-page>
</template>

<template id="action">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>Page</v-ons-back-button>
      </div>
      <div class="center">Action!</div>
    </v-ons-toolbar>
    <p style="text-align: center">This is the page of the action</p>
  </v-ons-page>
</template>


const action = {
  key: 'action',
  template: '#action'
};

const page = {
  key: 'page',
  template: '#page',
  methods: {
    push() {

      // Here you go to the page of your action. 
      // You just push it in the stack without changing the route.

      this.$emit('push-page', action);
    }
  }
};

const main = {
  template: '#main',
  data() {
    return {
      pageStack: [page]
    }
  }
};

Leave a comment