Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nativescript-vue/nativescript-vue-navigator
A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
https://github.com/nativescript-vue/nativescript-vue-navigator
nativescript nativescript-plugin nativescript-vue navigation router
Last synced: 4 months ago
JSON representation
A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
- Host: GitHub
- URL: https://github.com/nativescript-vue/nativescript-vue-navigator
- Owner: nativescript-vue
- License: mit
- Created: 2018-11-16T10:00:36.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-14T21:01:28.000Z (over 2 years ago)
- Last Synced: 2024-09-27T09:20:32.680Z (4 months ago)
- Topics: nativescript, nativescript-plugin, nativescript-vue, navigation, router
- Language: JavaScript
- Homepage:
- Size: 147 KB
- Stars: 98
- Watchers: 7
- Forks: 10
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NativeScript-Vue-Navigator
NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.
## Quick Start
```shell
$ npm install --save nativescript-vue-navigator
```
```diff
// main.js
import Vue from 'nativescript-vue'
...
+ import Navigator from 'nativescript-vue-navigator'
+ import {routes} from './routes'
+ Vue.use(Navigator, { routes })
new Vue({
- render: h => h('frame', App),
+ render: h => h(App),
}).$start()
```
```js
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'
export const routes = {
'/home': {
component: HomePage,
},
'/login': {
component: LoginPage,
},
}
```
```diff
// App.vue
+
```
### Attaching extra data to a route
```diff
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'
export const routes = {
'/home': {
component: HomePage,
+ // we are using `meta` as a good practice, but you are free to use something else
+ meta: { needsAuth: true }
},
'/login': {
component: LoginPage,
+ meta: { needsAuth: false }
},
}
```
```xml
```
```js
// or in any vue component
export default {
methods: {
doStuff() {
if(this.$navigator.route.meta.needsAuth) {
// do stuff
}
}
}
}
```
## 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`
`$navigator.navigate(to, options)` is used for all forward navigation
* `to` is the path to navigate to (ex.: `/home`)
* `options` is an optional object, which accepts all options supported by [Manual Routing](https://nativescript-vue.org/en/docs/routing/manual-routing/#navigateto)
For example, given you are on a Login page, and successfully log in you would navigate to the Home page with
```js
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 `` elements by providing each new Navigator with a unique `id`.
```vue
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' })
}
}
}
```
# Navigator Modals
```ts
type ModalOptions = { id: string } & ShowModalOptions
this.$navigator.modal(path: string, options: ModalOptions);
```
The default id for modal navigators is `modalNavigator` but can be changed by passing an `id` inside the ModalOptions.
```js
// use the default id for the modal
this.$navigator.modal('/path', { fullscreen: true })
// to navigate the modal to '/other'
this.$navigator.navigate('/other', { frame: 'modalNavigator' })
// use a different id for the modal
this.$navigator.modal('/path', { fullscreen: true, id: 'myModal' })
// to navigate the myModal modal to '/other'
this.$navigator.navigate('/other', { frame: 'myModal' })
```