Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9
A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
License
nativescript-vue/nativescript-vue-navigator
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.
$ 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>
// 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}}}}
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 byManual 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 usedclearHistory: true
to prevent the back button from going back to the login page.
$navigator.back(options, backstackEntry)
is an alias to$navigateBack
About
A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.