File tree Expand file tree Collapse file tree 4 files changed +170
-0
lines changed Expand file tree Collapse file tree 4 files changed +170
-0
lines changed Original file line number Diff line number Diff line change
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
+
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
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
+ }
You can’t perform that action at this time.
0 commit comments