├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
  1 | ## A simple router implementation that is suitable for NativeScript-Vue.
  2 | 
  3 | ## Prerequisites / Requirements
  4 | 
  5 | |                                               |
  6 | | --------------------------------------------- |
  7 | | All your own components must have unique name |
  8 | | All routes name must have unique name         |
  9 | | Your app need a main Frame in the render      |
 10 | 
 11 | ## Install
 12 | 
 13 | ```
 14 | npm install nativescript-vue-router-ns --save
 15 | or
 16 | yarn add nativescript-vue-router-ns
 17 | ```
 18 | 
 19 | ## Usage
 20 | 
 21 | ```js
 22 | // app/router/index.js
 23 | 
 24 | import Vue from 'nativescript-vue'
 25 | 
 26 | import NSVueRouter from 'nativescript-vue-router-ns'
 27 | 
 28 | import Dashboard from './components/Dashboard'
 29 | import Login from './components/Login'
 30 | 
 31 | Vue.use(NSVueRouter)
 32 | 
 33 | const routes = [
 34 |   {
 35 |     name: 'dashboard.index',
 36 |     component: Dashboard,
 37 |     meta: { auth: true }
 38 |   },
 39 |   {
 40 |     name: 'login.index',
 41 |     component: Login,
 42 |     meta: { guest: true }
 43 |   }
 44 | ]
 45 | 
 46 | const router = new NSVueRouter({
 47 |   ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
 48 |   routes,
 49 |   /* eslint-disable-next-line no-undef  */
 50 |   verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
 51 | })
 52 | 
 53 | export default router
 54 | ```
 55 | 
 56 | ```js
 57 | // app/app.js or app/main.js
 58 | 
 59 | import Vue from 'nativescript-vue'
 60 | 
 61 | import Main from './Main'
 62 | 
 63 | import router from './router'
 64 | 
 65 | new Vue({
 66 |   router
 67 | 
 68 |   // ...
 69 | 
 70 |   render: h => h('frame', [h(Main)]) // <-- Main Frame in render app
 71 | }).$start()
 72 | ```
 73 | 
 74 | ```html
 75 | <!-- Your own Vue Components -->
 76 | <template>
 77 |   <Page actionBarHidden="true">
 78 |     <FlexboxLayout flexDirection="column" justifyContent="center">
 79 |       <button text="Navigate direct" @tap="$router.push('dashboard.index')" />
 80 | 
 81 |       <button text="Navigate with method" @tap="submit" />
 82 |     </FlexboxLayout>
 83 |   </Page>
 84 | </template>
 85 | 
 86 | <script>
 87 |   export default {
 88 |     name: 'LoginIndex',
 89 | 
 90 |     methods: {
 91 |       submit() {
 92 |         // ...
 93 | 
 94 |         this.$router.pushClear('dashboard.index')
 95 | 
 96 |         // ...
 97 |       }
 98 |     }
 99 |   }
100 | </script>
101 | ```
102 | 
103 | ### Guards and other before actions
104 | 
105 | ```js
106 | // app/router/index.js
107 | 
108 | // ...
109 | 
110 | router.beforeEach((to, next) => {
111 |   if (to.meta.auth && isLogged) {
112 |     /* eslint-disable-next-line no-undef */
113 |     if (TNS_ENV !== 'production') {
114 |       /* eslint-disable-next-line no-console */
115 |       console.error(new Error('To Login!.'))
116 |     }
117 | 
118 |     router.pushClear('login.index')
119 |   } else if (to.meta.guest && isLogged) {
120 |     router.push('dashboard.index')
121 |   } else {
122 |     next()
123 |   }
124 | })
125 | 
126 | // ...
127 | ```
128 | 
129 | ## API
130 | 
131 | ### Installing
132 | 
133 | | Parameters   | Type      | Default | Description                                                 |
134 | | ------------ | --------- | ------- | ----------------------------------------------------------- |
135 | | `ignoreSame` | `Boolean` | `true`  | Set if reject or accept navigate to same current component. |
136 | | `routes`     | `Array`   | `[]`    | Array of objects with app's routes.                         |
137 | | `verbose`    | `Boolean` | `false` | Show output the warnings to console.                        |
138 | 
139 | ### Navigating
140 | 
141 | This package provides 3 methods for navigation, `$router.push`, `$router.pushClear` and `$router.back`
142 | 
143 | | Parameters | Type               | Description                                                                                                                                             |
144 | | ---------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
145 | | `name`     | `String`           | First parameter in `push` and `pushClear` methods.                                                                                                      |
146 | | `options`  | `Object`           | Is an optional object, which accepts all options supported by [Manual Routing](https://nativescript-vue.org/en/docs/routing/manual-routing/#navigateto) |
147 | | `times`    | `[String, Number]` | Optional parameter in `back` method that go back any times that you set.                                                                                |
148 | 
149 | NOTE: When `$router.pushClear` method is used the navigator stack is cleaned.
150 | 
151 | ## TODO
152 | 
153 | - [x] Native navigation
154 | - [x] Before actions
155 | - [ ] After actions
156 | - [ ] Nested routes
157 | 
158 | ## Contributing
159 | 
160 | Thank you for considering contributing to the NSVueRouter! Please leave your PR or [issue](https://github.com/emiliogrv/nativescript-vue-router/issues).
161 | 
162 | # License
163 | 
164 | [MIT](https://opensource.org/licenses/MIT)
165 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const router = {
  2 |   beforeHooks: [],
  3 |   options: {
  4 |     ignoreSame: true,
  5 |     routes: [],
  6 |     verbose: false
  7 |   },
  8 |   vue: null
  9 | }
 10 | 
 11 | class NSVueRouter {
 12 |   constructor(options = {}) {
 13 |     router.options = {
 14 |       ...router.options,
 15 |       ...options
 16 |     }
 17 |   }
 18 | 
 19 |   back(times) {
 20 |     back(times)
 21 |   }
 22 | 
 23 |   beforeEach(fn) {
 24 |     router.beforeHooks.push(fn)
 25 |   }
 26 | 
 27 |   push(...args) {
 28 |     push(...args)
 29 |   }
 30 | 
 31 |   pushClear(...args) {
 32 |     pushClear(...args)
 33 |   }
 34 | }
 35 | 
 36 | const back = (times = 1) => {
 37 |   for (let index = 0; index < times; index++) {
 38 |     router.vue.$navigateBack()
 39 |   }
 40 | }
 41 | 
 42 | const push = (name = null, options = {}) => {
 43 |   const route = router.options.routes.find(route => route.name === name)
 44 | 
 45 |   if (route) {
 46 |     if (
 47 |       router.options.ignoreSame &&
 48 |       reduce(router.vue, '$options.name') === reduce(route, 'component.name')
 49 |     ) {
 50 |       if (router.options.verbose) {
 51 |         /* eslint-disable-next-line no-console  */
 52 |         console.error(new Error('Same route!.'))
 53 |       }
 54 | 
 55 |       return
 56 |     }
 57 | 
 58 |     return resolveBeforeHooks(router.vue, route, options)
 59 |   }
 60 | 
 61 |   if (router.options.verbose) {
 62 |     /* eslint-disable-next-line no-console  */
 63 |     console.error(new Error(`Route ${name} not found!.`))
 64 |   }
 65 | }
 66 | 
 67 | const pushClear = (name, options = {}) => {
 68 |   push(name, { ...options, clearHistory: true })
 69 | }
 70 | 
 71 | const resolveBeforeHooks = (vue, route, options, current = 0) => {
 72 |   if (router.beforeHooks.length === current) {
 73 |     vue.$navigateTo(route.component, options)
 74 | 
 75 |     return
 76 |   }
 77 | 
 78 |   return router.beforeHooks[current](route, () =>
 79 |     resolveBeforeHooks(vue, route, options, current + 1)
 80 |   )
 81 | }
 82 | 
 83 | const reduce = (source, string = '') =>
 84 |   string
 85 |     .split('.')
 86 |     .reduce(
 87 |       (previous, current) =>
 88 |         typeof previous === 'object' ? previous[current] : previous,
 89 |       source
 90 |     )
 91 | 
 92 | const install = Vue => {
 93 |   Vue.mixin({
 94 |     beforeCreate() {
 95 |       if (this.$navigateTo && reduce(this, '$options.name')) {
 96 |         this.$router = {
 97 |           back,
 98 | 
 99 |           push,
100 | 
101 |           pushClear
102 |         }
103 | 
104 |         router.vue = this
105 |       }
106 |     }
107 |   })
108 | }
109 | 
110 | NSVueRouter.install = install
111 | 
112 | export default NSVueRouter
113 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nativescript-vue-router-ns",
 3 |   "version": "1.0.4",
 4 |   "description": "A simple router implementation that is suitable for NativeScript-Vue.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/emiliogrv/nativescript-vue-router.git"
12 |   },
13 |   "keywords": [
14 |     "nativescript",
15 |     "nativescript-vue",
16 |     "vue",
17 |     "router",
18 |     "vue-router",
19 |     "vue-navigator",
20 |     "webpack"
21 |   ],
22 |   "author": "Emilio Romero",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/emiliogrv/nativescript-vue-router/issues"
26 |   },
27 |   "homepage": "https://github.com/emiliogrv/nativescript-vue-router#readme",
28 |   "nativescript": {
29 |     "platforms": {
30 |       "android": "4.2.0",
31 |       "ios": "4.2.0"
32 |     },
33 |     "plugin": {
34 |       "vue": "true",
35 |       "category": "Developer"
36 |     }
37 |   },
38 |   "peerDependencies": {
39 |     "nativescript-vue": "^2.0.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------