ns plugin add nativescript-vue-router-extended

or

npm install nativescript-vue-router-extended

or

yarn add nativescript-vue-router-extended

import Vue from "nativescript-vue";
import { createRouter } from "nativescript-vue-router-extended";

// Initialize Example Routes
import moviesPage from "./pages/movies.vue";

const routes = [
  {
    path: "/movies",
    component: moviesPage,

    // Optional
    meta: {
      isVertical: true,
      // Example actions to dispatch automatically when page is visited
      // Remember that you need to implement actions in your Vuex store
      store: {
        // Call action to hide navigation buttons
        showNavigationButtons: false,

        // Call "showMovies" action in "categories" module with payload "all"
        "categories/showMovies": "all",

        // Call action without payload
        showNavigationButtons: null,
      },
    },

    // Optional, per route guards are supported
    // More info: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
    beforeEnter: (to, from) => {
      if (to.props.passUser) {
         // Continue navigation
         return true;
      }

      // Reject the navigation
      return false;
    },
  },
];

// Initialize Router
// Vue-Router settings are in 1st argument. 2nd one is used for extra NativeScript related settings
const router = createRouter(
  { routes },
  {
    // Optional settings below

    // Set first page to redirect to when there's no page to redirect back to
    routeBackFallbackPath: "/movies",

    // Do something straight before navigation or adjust NS routing settings
    routeToCallback: (to, options) => {
      // For example, change page navigation transition for the vertical on iOS
      if (to.meta.isVertical) {
        options.transition = {
          name: "fade",
        };
      }
    },

    // Do something straight before navigation or adjust NS routing settings
    routeBackCallback: (_to, options) => {
      // Do something...
    },

    // Set Vue Instance (Vue.prototype by default)
    vm: Vue.prototype,

    // Set a custom logger (console.log by default)
    logger: console.log,

    // Set custom frame, by default it's taken from @nativescript/core/ui/frame
    frame: Frame,
  }
);

// Register a global guard (optional)
// You can also use global router.beforeResolve guard and router.afterEach hook
router.beforeEach((to) => {
  // For example, verify per route access rules
  if (!canAccessRoute(to)) {
    return false;
  }

  return true;
});

// From now on you can access this.$router, this.$routeBack and special this.$routeTo inside of the components, example:
this.$routeTo("/movies", {
  // Clear History is a NativeScript setting
  clearHistory: true,
  
  // Route inside of custom Frame
  frame: "myFrameId",

  // Pass props to the page
  props: {
    movieId: 12,
  },
});

<template>
    <Page>
    </Page>
</template>

<script>

export default {
    name: 'movies',

    beforeRouteEnter(to, from, next) {
        // Do something before to enter to the route
        next((vm) => {
            // Do something once navigation is done
            // Instead of `this`, use `vm`
        });
    },

    beforeRouteLeave() {
        // Do something before to leave the route
        // You can use `this` inside of this hook
    },

    beforeRouteUpdate() {
        // Do something before to leave the route
        // before redirecting to another route with same path
        // You can use `this` inside of this hook
    },

    mounted() {
       // Output current route object with name, path etc.
       console.log(this.$route);
    },
};
</script>