A simple router for NativeScript-Vue
npm install nativescript-vue-navigatorNativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.
``shell`
$ npm install --save nativescript-vue-navigator
`diff
// 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()
`
`js
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'
export const routes = {
'/home': {
component: HomePage,
},
'/login': {
component: LoginPage,
},
}
`
`diff`
// App.vue
+
`diff
// 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 }
},
}
`xml``js`
// or in any vue component
export default {
methods: {
doStuff() {
if(this.$navigator.route.meta.needsAuth) {
// do stuff
}
}
}
}
`js
// 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)
`
This package provides 2 methods for navigation, $navigator.navigate and $navigator.back
$navigator.navigate(to, options) is used for all forward navigationto
* 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 withjs`
this.$navigator.navigate('/home', { clearHistory: true })clearHistory: true
Note that we used to prevent the back button from going back to the login page.
$navigator.back(options, backstackEntry) is an alias to $navigateBack
It is possible to use multiple elements by providing each new Navigator with a unique id.
`vue
`
`ts`
type ModalOptions = { id: string } & ShowModalOptions
this.$navigator.modal(path: string, options: ModalOptions);
The default id for modal navigators is modalNavigator but can be changed by passing an id inside the ModalOptions.
`js
// 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' })
``