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

• 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