Skip to content

Commit 08cb1b7

Browse files
committed
add initial implementation files
1 parent 89a57d3 commit 08cb1b7

File tree

4 files changed

+170
-0
lines changed

4 files changed

+170
-0
lines changed

README.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# NativeScript-Vue-Navigator
2+
3+
NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.
4+
5+
## Quick Start
6+
7+
```shell
8+
$ npm install --save nativescript-vue-navigator
9+
```
10+
11+
```diff
12+
// main.js
13+
import Vue from 'nativescript-vue'
14+
...
15+
+import Navigator from 'nativescript-vue-navigator'
16+
+import {routes} from './routes'
17+
+Vue.use(Navigator, { routes })
18+
19+
new Vue({
20+
- render: h => h('frame', App),
21+
+ render: h => h(App),
22+
}).$start()
23+
```
24+
25+
```js
26+
// routes.js
27+
import HomePage from './components/HomePage'
28+
import LoginPage from './components/LoginPage'
29+
30+
export const routes = {
31+
'/home': {
32+
component: HomePage,
33+
},
34+
'/login': {
35+
component: LoginPage,
36+
},
37+
}
38+
```
39+
40+
```diff
41+
// App.vue
42+
<template>
43+
+ <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/>
44+
</template>
45+
```
46+

components/Navigator.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
export default {
2+
props: {
3+
defaultRoute: {
4+
type: String,
5+
default: '/',
6+
},
7+
},
8+
render(h) {
9+
this.slotContent = this.slotContent || h(this.defaultRouteComponent)
10+
return h(
11+
'frame',
12+
{
13+
on: {loaded: this.onFrameLoaded},
14+
},
15+
[this.slotContent]
16+
)
17+
},
18+
created() {
19+
this.defaultRouteComponent = this.$navigator._resolveComponent(
20+
this.$props.defaultRoute
21+
)
22+
},
23+
methods: {
24+
onFrameLoaded({object}) {
25+
if (object.__defined__custom_currentEntry) {
26+
// don't try do define the property multiple times
27+
return
28+
}
29+
object.__defined__custom_currentEntry = true
30+
31+
const self = this
32+
let _currentEntry = object._currentEntry
33+
Object.defineProperty(object, '_currentEntry', {
34+
get() {
35+
return _currentEntry
36+
},
37+
set(value) {
38+
_currentEntry = value
39+
if (value && value.resolvedPage) {
40+
self.$navigator._updatePath(
41+
value.resolvedPage.__path || value.resolvedPage.path || ''
42+
)
43+
}
44+
},
45+
})
46+
},
47+
},
48+
}

index.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Navigator from './components/Navigator'
2+
3+
export default function install(Vue, {routes}) {
4+
Vue.component('Navigator', Navigator)
5+
6+
Object.keys(routes).map(path => {
7+
routes[path].component.__path = path
8+
})
9+
10+
Vue.mixin({
11+
mounted() {
12+
// attach the current path if set to the root element
13+
if (this.$options.__path) {
14+
this.$el.setAttribute('__path', this.$options.__path)
15+
}
16+
},
17+
})
18+
19+
Vue.prototype.$navigator = new Vue({
20+
data: {
21+
path: '',
22+
},
23+
computed: {
24+
route() {
25+
return this._resolveRoute(this.path)
26+
},
27+
},
28+
methods: {
29+
_resolveRoute(path) {
30+
return routes[path]
31+
},
32+
_resolveComponent(path) {
33+
const route = this._resolveRoute(path)
34+
if (route) {
35+
return route.component
36+
}
37+
return false
38+
},
39+
_updatePath(path) {
40+
this.path = path
41+
},
42+
43+
navigate(to, options) {
44+
const matchedRoute = routes[to]
45+
46+
if (!matchedRoute) {
47+
if (TNS_ENV === 'development') {
48+
throw new Error(`Navigating to a route that doesnt exist: ${to}`)
49+
}
50+
return false
51+
}
52+
53+
this.$navigateTo(matchedRoute.component, options)
54+
}
55+
},
56+
})
57+
}

package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "nativescript-vue-navigator",
3+
"version": "0.0.1",
4+
"description": "A simple router for NativeScript-Vue",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [
10+
"nativescript",
11+
"vue",
12+
"nativescript-vue",
13+
"router",
14+
"navigator",
15+
"navigation"
16+
],
17+
"author": "Igor Randjelovic",
18+
"license": "MIT"
19+
}

0 commit comments

Comments
 (0)