适用于 NativeScript-Vue 的简单路由实现。

先决条件 / 要求


所有您自己的组件必须具有唯一的名称
所有路由名称必须具有唯一的名称
您的应用需要在渲染中有一个主框架

安装

npm install nativescript-vue-router-ns --save
or
yarn add nativescript-vue-router-ns

用法

// 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>

守卫和其他前置动作

// 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

安装

参数	类型	默认值	描述
`ignoreSame`	`布尔值`	`true`	设置是否拒绝或接受导航到相同的当前组件。
`routes`	`数组`	`[]`	包含应用路由的对象数组。
`verbose`	`布尔值`	`false`	将警告输出到控制台。

参数	类型	描述
`name`	`字符串`	`push` 和 `pushClear` 方法中的第一个参数。
`options`	`对象`	是一个可选对象，它接受所有由手动路由支持的选项
`times`	`[字符串，数字]`	`back` 方法中的可选参数，用于后退您设置的任何次数。

待办事项

[x] 本地导航
[x]前置动作
[ ] 后置动作
[ ] 嵌套路由

贡献

感谢您考虑为 NSVueRouter 贡献！请留下您的 PR 或问题。

许可

MIT

适用于 NativeScript-Vue 的简单路由实现。

先决条件 / 要求

安装

用法

守卫和其他前置动作

API

安装

导航

待办事项

贡献

许可