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 main Frame in the render |
Install
npm install nativescript-vue-router-ns --save
or
yarn add nativescript-vue-router-ns
Usage
// app/router/index.js
import Vue from 'nativescript-vue'
import NSVueRouter from 'nativescript-vue-router-ns'
import Dashboard from './components/Dashboard'
import Login from './components/Login'
Vue.use(NSVueRouter)
const routes = [
{
name: 'dashboard.index',
component: Dashboard,
meta: { auth: true }
},
{
name: 'login.index',
component: Login,
meta: { guest: true }
}
]
const router = new NSVueRouter({
ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
routes,
/* eslint-disable-next-line no-undef */
verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
})
export default router
// app/app.js or app/main.js
import Vue from 'nativescript-vue'
import Main from './Main'
import router from './router'
new Vue({
router
// ...
render: h => h('frame', [h(Main)]) // <-- Main Frame in render app
}).$start()
<!-- Your own Vue Components -->
<template>
<Page actionBarHidden="true">
<FlexboxLayout flexDirection="column" justifyContent="center">
<button text="Navigate direct" @tap="$router.push('dashboard.index')" />
<button text="Navigate with method" @tap="submit" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
name: 'LoginIndex',
methods: {
submit() {
// ...
this.$router.pushClear('dashboard.index')
// ...
}
}
}
</script>
Guards and other before actions
// app/router/index.js
// ...
router.beforeEach((to, next) => {
if (to.meta.auth && isLogged) {
/* eslint-disable-next-line no-undef */
if (TNS_ENV !== 'production') {
/* eslint-disable-next-line no-console */
console.error(new Error('To Login!.'))
}
router.pushClear('login.index')
} else if (to.meta.guest && isLogged) {
router.push('dashboard.index')
} else {
next()
}
})
// ...
API
Installing
| Parameters | Type | Default | Description |
|---|---|---|---|
ignoreSame |
Boolean |
true |
Set if reject or accept navigate to same current component. |
routes |
Array |
[] |
Array of objects with app's routes. |
verbose |
Boolean |
false |
Show output the warnings to console. |
Navigating
This package provides 3 methods for navigation, $router.push, $router.pushClear and $router.back
| Parameters | Type | Description |
|---|---|---|
name |
String |
First parameter in push and pushClear methods. |
options |
Object |
Is an optional object, which accepts all options supported by Manual Routing |
times |
[String, Number] |
Optional parameter in back method that go back any times that you set. |
NOTE: When $router.pushClear method is used the navigator stack is cleaned.
TODO
- Native navigation
- Before actions
- After actions
- Nested routes
Contributing
Thank you for considering contributing to the NSVueRouter! Please leave your PR or issue.
License
-
目录 1. SPA是什么 2. SPA实现思路和技术点 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. router-link相关属性 5. js中const,var,let区别？ 1. SPA是什么 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互
-
今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发， 后来测试发现，所有绑定在router-link中的事件都不会触发 此后查看了官方的文档，也并没有给出明确的说明： 代码如下： <li > <router-link to="/one" @click="change('color1')" :class="{'b
-
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
-
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
-
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
-
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.jsimp
-
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