A simple router implementation that is suitable for NativeScript-Vue.
Prerequisites / Requirements
| All your own components must have unique name |
| All routes name must have unique name |
| Your app need a main Frame in the render |
Install
npm install nativescript-vue-router-ns --save
or
yarn add nativescript-vue-router-ns
Usage
// app/router/index.js
import Vue from 'nativescript-vue'
import NSVueRouter from 'nativescript-vue-router-ns'
import Dashboard from './components/Dashboard'
import Login from './components/Login'
Vue.use(NSVueRouter)
const routes = [
{
name: 'dashboard.index',
component: Dashboard,
meta: { auth: true }
},
{
name: 'login.index',
component: Login,
meta: { guest: true }
}
]
const router = new NSVueRouter({
ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
routes,
/* eslint-disable-next-line no-undef */
verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
})
export default router// app/app.js or app/main.js
import Vue from 'nativescript-vue'
import Main from './Main'
import router from './router'
new Vue({
router
// ...
render: h => h('frame', [h(Main)]) // <-- Main Frame in render app
}).$start()<!-- Your own Vue Components -->
<template>
<Page actionBarHidden="true">
<FlexboxLayout flexDirection="column" justifyContent="center">
<button text="Navigate direct" @tap="$router.push('dashboard.index')" />
<button text="Navigate with method" @tap="submit" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
name: 'LoginIndex',
methods: {
submit() {
// ...
this.$router.pushClear('dashboard.index')
// ...
}
}
}
</script>Guards and other before actions
// app/router/index.js
// ...
router.beforeEach((to, next) => {
if (to.meta.auth && isLogged) {
/* eslint-disable-next-line no-undef */
if (TNS_ENV !== 'production') {
/* eslint-disable-next-line no-console */
console.error(new Error('To Login!.'))
}
router.pushClear('login.index')
} else if (to.meta.guest && isLogged) {
router.push('dashboard.index')
} else {
next()
}
})
// ...API
Installing
| Parameters | Type | Default | Description |
|---|---|---|---|
ignoreSame |
Boolean |
true |
Set if reject or accept navigate to same current component. |
routes |
Array |
[] |
Array of objects with app's routes. |
verbose |
Boolean |
false |
Show output the warnings to console. |
Navigating
This package provides 3 methods for navigation, $router.push, $router.pushClear and $router.back
| Parameters | Type | Description |
|---|---|---|
name |
String |
First parameter in push and pushClear methods. |
options |
Object |
Is an optional object, which accepts all options supported by Manual Routing |
times |
[String, Number] |
Optional parameter in back method that go back any times that you set. |
NOTE: When $router.pushClear method is used the navigator stack is cleaned.
TODO
- Native navigation
- Before actions
- After actions
- Nested routes
Contributing
Thank you for considering contributing to the NSVueRouter! Please leave your PR or issue.