NativeScript-Vue-Navigator

NativeScript-Vue-Navigator 是一个适用于 NativeScript-Vue 的简单路由器实现。

快速入门

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

将额外数据附加到路由

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

获取当前路径

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

导航

此包提供了两种导航方法，$navigator.navigate 和 $navigator.back

$navigator.navigate(to, options) 用于所有前进导航

• to 是要导航到的路径（例如：/home）
• options 是一个可选对象，它接受 手动路由 所支持的所有选项

例如，假设您在登录页面，登录成功后，您会使用以下方式导航到主页

this.$navigator.navigate('/home', { clearHistory: true })

请注意，我们使用了 clearHistory: true 以防止返回按钮回到登录页面。

$navigator.back(options, backstackEntry) 是 $navigateBack 的别名

多个导航器

可以通过为每个新的导航器提供一个唯一的 id 来使用多个 <Navigator> 元素。

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

导航器模态

type ModalOptions = { id: string } & ShowModalOptions
this.$navigator.modal(path: string, options: ModalOptions);

模态导航器的默认 id 为 modalNavigator，但可以通过在 ModalOptions 中传递一个 id 来更改。

// 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' })