Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit99f9e36

Browse files
committed
feat: support multiple navigators
close#27,close#29BREAKING CHANGE: the default navigator id is now set to `navigator` instead of `default`
1 parent38160d3 commit99f9e36

File tree

3 files changed

+68
-6
lines changed

3 files changed

+68
-6
lines changed

‎README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,16 @@ export default {
8181
}
8282
```
8383

84+
##Getting the current path
85+
86+
```js
87+
// logs the current path in the default navigator
88+
console.log(this.$navigator.path)
89+
90+
// logs the current path in the second navigator (See Multiple Navigators section for more details)
91+
console.log(this.$navigator.paths.second)
92+
```
93+
8494
##Navigating
8595

8696
This package provides 2 methods for navigation,`$navigator.navigate` and`$navigator.back`
@@ -96,3 +106,40 @@ this.$navigator.navigate('/home', { clearHistory: true })
96106
Note that we used`clearHistory: true` to prevent the back button from going back to the login page.
97107

98108
`$navigator.back(options, backstackEntry)` is an alias to[`$navigateBack`](https://nativescript-vue.org/en/docs/routing/manual-routing/#navigatebackoptions-backstackentry--null)
109+
110+
#Multiple Navigators
111+
112+
It is possible to use multiple`<Navigator>` elements by providing each new Navigator with a unique`id`.
113+
114+
```vue
115+
<template>
116+
<!-- this is the default navigator and can omit the id -->
117+
<Navigator />
118+
<!-- shows the current path of the default navigator -->
119+
<Label :text="$navigator.path" />
120+
121+
<!-- this is the second navigator and it MUST have a unique id -->
122+
<Navigator id="second" />
123+
<!-- shows the current path of the second navigator -->
124+
<Label :text="$navigator.paths.second" />
125+
</template>
126+
127+
<script>
128+
export default {
129+
methods: {
130+
someMethod() {
131+
// navigate the default Navigator
132+
this.$navigator.navigate('/new-path')
133+
// navigate the second default Navigator by specifying the frame option
134+
this.$navigator.navigate('/new-path', { frame: 'second' })
135+
136+
137+
// navigate back the default Navigator
138+
this.$navigator.back()
139+
// navigate back the second Navigator
140+
this.$navigator.back({ frame: 'second' })
141+
}
142+
}
143+
}
144+
</script>
145+
```

‎components/Navigator.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
exportdefault{
22
props:{
3+
id:{
4+
type:String,
5+
default:'navigator'
6+
},
37
defaultRoute:{
48
type:String,
59
default:'/',
@@ -15,7 +19,10 @@ export default {
1519
this.$listeners,
1620
{loaded:this.onFrameLoaded}
1721
),
18-
attrs:this.$attrs,
22+
attrs:{
23+
...this.$attrs,
24+
id:this.$props.id
25+
},
1926
},
2027
[this.slotContent]
2128
)
@@ -43,7 +50,8 @@ export default {
4350
_currentEntry=value
4451
if(value&&value.resolvedPage){
4552
self.$navigator._updatePath(
46-
value.resolvedPage.__path||self.defaultRoute||''
53+
value.resolvedPage.__path||self.defaultRoute||'',
54+
self.$props.id
4755
)
4856
}
4957
},

‎index.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default function install(Vue, {routes}) {
1919
Vue.prototype.$navigator=newVue({
2020
data:{
2121
path:false,
22+
paths:{},
2223
defaultPath:'/'
2324
},
2425
computed:{
@@ -35,8 +36,11 @@ export default function install(Vue, {routes}) {
3536
}
3637
returnfalse
3738
},
38-
_updatePath(path){
39-
this.path=path
39+
_updatePath(path,id='navigator'){
40+
if(id==='navigator'){
41+
this.path=path
42+
}
43+
this.$set(this.paths,id,path)
4044
},
4145

4246
navigate(to,options){
@@ -49,10 +53,13 @@ export default function install(Vue, {routes}) {
4953
returnfalse
5054
}
5155

56+
options=Object.assign({frame:'navigator'},options)
57+
5258
returnthis.$navigateTo(matchedRoute.component,options)
5359
},
54-
back(...args){
55-
returnthis.$navigateBack.call(this,args)
60+
back(options, ...args){
61+
options=Object.assign({frame:'navigator'},options)
62+
returnthis.$navigateBack.call(this,options, ...args)
5663
}
5764
},
5865
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp