nativescript-vue-router-ns
by emiliogrv | v1.0.4
A simple router implementation that is suitable for NativeScript-Vue.
npm i --save nativescript-vue-router-ns

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

  • [x] Native navigation
  • [x] Before actions
  • [ ] After actions
  • [ ] Nested routes

Contributing

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

License

MIT