Nativescript Vue - Easy Nav

首先，这并不是 NSV 中 VueRouter 的替代品。真正的路由器在 NSV 中还遥不可及。

Easy Nav 是内置的 $navigateTo() 功能的简单封装。这避免了每次需要导航时都导入组件，同时也允许你以更类似 VueRouter 的方式与路由层交互。

安装

npm i @billow/nsv-easy-nav

设置

import Router from '@billow/nsv-easy-nav'

let routes = new Router({
  routes: [
    {
      name: 'welcome',
      component: Welcome
    }
  ]
})

// When the application comes out of a closed state, we need to determine which component 
// to render. If the user is not authenticated show the Welcome component and visa versa.
//
// Note: userIsAuthenticated is only an example, your application must handle authentication. 

let StartUpComponent = (userIsAuthenticated) ? Dashboard : Welcome

new Vue({

  router,
  
  render: h => h('frame', [h(StartUpComponent)]),

}).$start()

用法

<StackLayout>
  <Button @tap="$router.go('dashboard')">Dashboard</Button> // Navigates with history
  <Button @tap="$router.clear.go('dashboard')">Dashboard</Button> // Navigates and clears back stack.
  <Button @tap="$router.go('user-edit', {
    userId: 1
  })">Edit User</Button> // Props passed as second argument
  <Button @tap="$router.back()">Back</Button> // Navigates with back stack
</StackLayout>

实例内的用法。

export default {

  methods: {
    goToDashboard() {
      this.$router.go('dashboard') // Navigates with history
    },
    
    editUser(userId) {
      this.$router.go('user-edit', { // Navigates with a prop passed as second argument
        userId
      })
    },
  }

}

去

go 方法接受 3 个参数，Android 有一些默认值。

  go(name, props = {}, transitions = {
    android: {
      name: 'slide',
      curve: enums.AnimationCurve.ease
    }
  })

清除

通常与 go() 配对，此方法不接受任何参数。

  this.$router.clear.go()