Quick Start

$ npm install --save nativescript-vue-navigator

// main.jsimport 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.jsimportHomePagefrom'./components/HomePage'importLoginPagefrom'./components/LoginPage'exportconstroutes={'/home':{component:HomePage,},'/login':{component:LoginPage,},}

// App.vue<template>+  <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/></template>

Attaching extra data to a route

// routes.jsimport 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 componentexportdefault{methods:{doStuff(){if(this.$navigator.route.meta.needsAuth){// do stuff}}}}

Getting the current path

// logs the current path in the default navigatorconsole.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-->  <Navigatorid="second" /><!-- shows the current path of the second navigator-->  <Label:text="$navigator.paths.second" /></template><script>exportdefault {    methods: {someMethod() {// navigate the default Navigatorthis.$navigator.navigate('/new-path')// navigate the second default Navigator by specifying the frame optionthis.$navigator.navigate('/new-path', { frame:'second' })// navigate back the default Navigatorthis.$navigator.back()// navigate back the second Navigatorthis.$navigator.back({ frame:'second' })      }    }  }</script>

Navigator Modals

typeModalOptions={id:string}&ShowModalOptionsthis.$navigator.modal(path:string,options:ModalOptions);

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