NativeScript-Vue-Navigator
NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue.
Quick Start
$ npm install --save nativescript-vue-navigator
// 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()
// routes.js
import HomePage from './components/HomePage'
import LoginPage from './components/LoginPage'
export const routes = {
'/home': {
component: HomePage,
},
'/login': {
component: LoginPage,
},
}
// App.vue
<template>
+ <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/>
</template>
Attaching extra data to a route
// 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 }
},
}
<!-- anywhere in your templates -->
<Label :text="$navigator.route.meta.needsAuth" />
// or in any vue component
export default {
methods: {
doStuff() {
if(this.$navigator.route.meta.needsAuth) {
// do stuff
}
}
}
}
Getting the current path
// 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
tois the path to navigate to (ex.:/home)optionsis an optional object, which accepts all options supported by Manual Routing
For example, given you are on a Login page, and successfully log in you would navigate to the Home page with
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
Multiple Navigators
It is possible to use multiple <Navigator> elements by providing each new Navigator with a unique id.
<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>
Navigator Modals
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.
// 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' })
-
开发规范 为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范： 页面文件遵循 Vue 单文件组件 (SFC) 规范 组件标签靠近小程序规范，详见uni-app 组件规范 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期 为兼容多
-
Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Alves Kamen Bundev Jan Weller OpenLitterMap Aparajit
-
Supporting NativeScript-Vue-Examples This project is a personal maintenance project, due to limited energy, you need to support. Welcome star, your star is my biggest support! NSVue Examples A native
-
A simple router implementation that is suitable for NativeScript-Vue. Prerequisites / Requirements All your own components must have unique name All routes name must have unique name Your app need a m
-
Awesome NativeScript Vue NativeScript-vue resource collection. This is a document to be completed together. Collaboration with the "revision" branch. Thank you Official: Documentation Repository Slack
-
NativeScript-Vue Global Drawer A Vue.js plugin that bootstrap the integration of RadSideDrawer in your NativeScript-Vue project. Declare your drawer once and access it everywhere through your componen
-
NativeScript Vue Router nativescript-vue-router-extended NativeScript Vue Router brings easier routing handling to mobile apps, with an API compatibility with web version of Vue Router. Please file an