NativeScript-Vue-Navigator

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
 }
 }
 }
}

Getting the current path

// logs the current path in the default navigator
console.log(this.$navigator.path)
// logs the current path in the second navigator (See Multiple Navigators section for more details)
console.log(this.$navigator.paths.second)

Navigating

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

Multiple Navigators

<template>
 <!-- this is the default navigator and can omit the id -->
 <Navigator /> 
 <!-- shows the current path of the default navigator -->
 <Label :text="$navigator.path" />
 <!-- this is the second navigator and it MUST have a unique id -->
 <Navigator id="second" /> 
 <!-- shows the current path of the second navigator -->
 <Label :text="$navigator.paths.second" />
</template>
<script>
 export default {
 methods: {
 someMethod() {
 // navigate the default Navigator
 this.$navigator.navigate('/new-path')
 // navigate the second default Navigator by specifying the frame option
 this.$navigator.navigate('/new-path', { frame: 'second' })


 // navigate back the default Navigator
 this.$navigator.back()
 // navigate back the second Navigator
 this.$navigator.back({ frame: 'second' })
 }
 } 
 }
</script>

Navigator Modals

type ModalOptions = { id: string } & ShowModalOptions
this.$navigator.modal(path: string, options: ModalOptions);

// use the default id for the modal
this.$navigator.modal('/path', { fullscreen: true })
// to navigate the modal to '/other'
this.$navigator.navigate('/other', { frame: 'modalNavigator' })
// use a different id for the modal
this.$navigator.modal('/path', { fullscreen: true, id: 'myModal' })
// to navigate the myModal modal to '/other'
this.$navigator.navigate('/other', { frame: 'myModal' })