Skip to content
A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components fix: default route resolution + docs Nov 30, 2018
LICENSE Initial commit Nov 16, 2018
README.md fix: default route resolution + docs Nov 30, 2018
index.js fix: default route resolution + docs Nov 30, 2018
package-lock.json
package.json

README.md

NativeScript-Vue-Navigator

NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.

Quick Start

$ npm install --save nativescript-vue-navigator
// main.js
import Vue from 'nativescript-vue'
...
+ import Navigator from 'nativescript-vue-navigator'
+ import {routes} from './routes'
+ Vue.use(Navigator, { routes })

new Vue({
-   render: h => h('frame', App),
+   render: h => h(App),
}).$start()
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'

export const routes = {
  '/home': {
    component: HomePage,
  },
  '/login': {
    component: LoginPage,
  },
}
// App.vue
<template>
+  <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/>
</template>

Attaching extra data to a route

// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'

export const routes = {
  '/home': {
    component: HomePage,
+   // we are using `meta` as a good practice, but you are free to use something else
+   meta: { needsAuth: true }
  },
  '/login': {
    component: LoginPage,
+   meta: { needsAuth: false }
  },
}
<!-- anywhere in your templates -->
<Label :text="$navigator.route.meta.needsAuth" />
// or in any vue component
export default {
  methods: {
    doStuff() {
      if(this.$navigator.route.meta.needsAuth) {
        // do stuff
      }
    }
  }
}

Navigating

This package provides 2 methods for navigation, $navigator.navigate and $navigator.back

$navigator.navigate(to, options) is used for all forward navigation

  • to is the path to navigate to (ex.: /home)
  • options is an optional object, which accepts all options supported by Manual Routing

For example, given you are on a Login page, and successfully log in you would navigate to the Home page with

this.$navigator.navigate('/home', { clearHistory: true })

Note that we used clearHistory: true to prevent the back button from going back to the login page.

$navigator.back(options, backstackEntry) is an alias to $navigateBack

You can’t perform that action at this time.