Skip to content

Commit 6492a21

Browse files
emiliogrvemiliogrv
committed
release
1 parent f7316f2 commit 6492a21

File tree

3 files changed

+312
-1
lines changed

3 files changed

+312
-1
lines changed

‎README.md

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

‎index.js

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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

‎package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "nativescript-vue-router",
3+
"version": "1.0.0",
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+
}

0 commit comments

Comments
 (0)