A simple router implementation that is suitable for NativeScript-Vue.

Prerequisites / Requirements


All your own components must have unique name
All routes name must have unique name
Your app need a main Frame in the render

Install

npm install nativescript-vue-router-ns --save
or
yarn add nativescript-vue-router-ns

Usage

// app/router/index.js

import Vue from 'nativescript-vue'

import NSVueRouter from 'nativescript-vue-router-ns'

import Dashboard from './components/Dashboard'
import Login from './components/Login'

Vue.use(NSVueRouter)

const routes = [
  {
    name: 'dashboard.index',
    component: Dashboard,
    meta: { auth: true }
  },
  {
    name: 'login.index',
    component: Login,
    meta: { guest: true }
  }
]

const router = new NSVueRouter({
  ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
  routes,
  /* eslint-disable-next-line no-undef  */
  verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
})

export default router

// app/app.js or app/main.js

import Vue from 'nativescript-vue'

import Main from './Main'

import router from './router'

new Vue({
  router

  // ...

  render: h => h('frame', [h(Main)]) // <-- Main Frame in render app
}).$start()

<!-- Your own Vue Components -->
<template>
  <Page actionBarHidden="true">
    <FlexboxLayout flexDirection="column" justifyContent="center">
      <button text="Navigate direct" @tap="$router.push('dashboard.index')" />

      <button text="Navigate with method" @tap="submit" />
    </FlexboxLayout>
  </Page>
</template>

<script>
  export default {
    name: 'LoginIndex',

    methods: {
      submit() {
        // ...

        this.$router.pushClear('dashboard.index')

        // ...
      }
    }
  }
</script>

Guards and other before actions

// app/router/index.js

// ...

router.beforeEach((to, next) => {
  if (to.meta.auth && isLogged) {
    /* eslint-disable-next-line no-undef */
    if (TNS_ENV !== 'production') {
      /* eslint-disable-next-line no-console */
      console.error(new Error('To Login!.'))
    }

    router.pushClear('login.index')
  } else if (to.meta.guest && isLogged) {
    router.push('dashboard.index')
  } else {
    next()
  }
})

// ...

API

Installing

Parameters	Type	Default	Description
`ignoreSame`	`Boolean`	`true`	Set if reject or accept navigate to same current component.
`routes`	`Array`	`[]`	Array of objects with app's routes.
`verbose`	`Boolean`	`false`	Show output the warnings to console.

Navigating

This package provides 3 methods for navigation, $router.push, $router.pushClear and $router.back

Parameters	Type	Description
`name`	`String`	First parameter in `push` and `pushClear` methods.
`options`	`Object`	Is an optional object, which accepts all options supported by Manual Routing
`times`	`[String, Number]`	Optional parameter in `back` method that go back any times that you set.

NOTE: When $router.pushClear method is used the navigator stack is cleaned.

TODO

Native navigation
Before actions
After actions
Nested routes

Contributing

Thank you for considering contributing to the NSVueRouter! Please leave your PR or issue.

License

MIT