feat: support multiple navigators

close #27, close #29

BREAKING CHANGE: the default navigator id is now set to `navigator` instead of `default`

Author: rigor789

README.md

@@ -81,6 +81,16 @@ export default {
 }
 ```
 
+## Getting the current path
+
+```js
+// logs the current path in the default navigator
+console.log(this.$navigator.path)
+
+// logs the current path in the second navigator (See Multiple Navigators section for more details)
+console.log(this.$navigator.paths.second)
+```
+
 ## Navigating
 
 This package provides 2 methods for navigation, `$navigator.navigate` and `$navigator.back`
@@ -96,3 +106,40 @@ this.$navigator.navigate('/home', { clearHistory: true })
 Note that we used `clearHistory: true` to prevent the back button from going back to the login page.
 
 `$navigator.back(options, backstackEntry)` is an alias to [`$navigateBack`](https://nativescript-vue.org/en/docs/routing/manual-routing/#navigatebackoptions-backstackentry--null)
+
+# Multiple Navigators
+
+It is possible to use multiple `<Navigator>` elements by providing each new Navigator with a unique `id`. 
+
+```vue
+<template>
+  <!-- this is the default navigator and can omit the id -->
+  <Navigator />   
+  <!-- shows the current path of the default navigator -->
+  <Label :text="$navigator.path" />
+
+  <!-- this is the second navigator and it MUST have a unique id -->
+  <Navigator id="second" /> 
+  <!-- shows the current path of the second navigator -->
+  <Label :text="$navigator.paths.second" />
+</template>
+
+<script>
+  export default {
+    methods: {
+      someMethod() {
+        // navigate the default Navigator
+        this.$navigator.navigate('/new-path')
+        // navigate the second default Navigator by specifying the frame option
+        this.$navigator.navigate('/new-path', { frame: 'second' })
+
+
+        // navigate back the default Navigator
+        this.$navigator.back()
+        // navigate back the second Navigator
+        this.$navigator.back({ frame: 'second' })
+      }
+    }    
+  }
+</script>
+```

components/Navigator.js

@@ -1,5 +1,9 @@
 export default {
   props: {
+    id: {
+      type: String,
+      default: 'navigator'
+    },
     defaultRoute: {
       type: String,
       default: '/',
@@ -15,7 +19,10 @@ export default {
           this.$listeners,
           {loaded: this.onFrameLoaded}
         ),
-        attrs: this.$attrs,
+        attrs: {
+          ...this.$attrs,
+          id: this.$props.id
+        },
       },
       [this.slotContent]
     )
@@ -43,7 +50,8 @@ export default {
           _currentEntry = value
           if (value && value.resolvedPage) {
             self.$navigator._updatePath(
-              value.resolvedPage.__path || self.defaultRoute || ''
+              value.resolvedPage.__path || self.defaultRoute || '',
+              self.$props.id
             )
           }
         },

index.js

@@ -19,6 +19,7 @@ export default function install(Vue, {routes}) {
   Vue.prototype.$navigator = new Vue({
     data: {
       path: false,
+      paths: {},
       defaultPath: '/'
     },
     computed: {
@@ -35,8 +36,11 @@ export default function install(Vue, {routes}) {
         }
         return false
       },
-      _updatePath(path) {
-        this.path = path
+      _updatePath(path, id = 'navigator') {
+        if(id === 'navigator') {
+          this.path = path
+        }
+        this.$set(this.paths, id, path)
       },
 
       navigate(to, options) {
@@ -49,10 +53,13 @@ export default function install(Vue, {routes}) {
           return false
         }
 
+        options = Object.assign({ frame: 'navigator' }, options)
+
         return this.$navigateTo(matchedRoute.component, options)
       },
-      back(...args) {
-        return this.$navigateBack.call(this, args)
+      back(options, ...args) {
+        options = Object.assign({ frame: 'navigator' }, options)
+        return this.$navigateBack.call(this, options, ...args)
       }
     },
   })