Navigation | Vue Native

Vue Native includes stack-based navigation via @thelacanians/vue-native-navigation.

Setup

// app/main.ts
import { createApp } from '@thelacanians/vue-native-runtime'
import { createRouter } from '@thelacanians/vue-native-navigation'
import App from './App.vue'
import HomeView from './views/HomeView.vue'
import DetailView from './views/DetailView.vue'

const router = createRouter([
  { name: 'home', component: HomeView },
  { name: 'detail', component: DetailView },
])

createApp(App).use(router).start()

Root component

<!-- App.vue -->
<template>
  <RouterView />
</template>

Navigating

<!-- HomeView.vue -->
<script setup>
import { useRouter } from '@thelacanians/vue-native-navigation'
const router = useRouter()
</script>

<template>
  <VView style="flex: 1">
    <VButton :onPress="() => router.push('detail', { id: 42 })">
      <VText>Go to Detail</VText>
    </VButton>
  </VView>
</template>

Reading params

<!-- DetailView.vue -->
<script setup>
import { useRoute } from '@thelacanians/vue-native-navigation'
const route = useRoute()
// route.value.params.id === 42
</script>

API

`createRouter(routes)`

Creates a router instance. Call once at app startup.

const router = createRouter([
  { name: 'home', component: HomeView },
  { name: 'detail', component: DetailView },
])

`useRouter()`

Returns the router instance.

Method	Description
`router.push(name, params?)`	Navigate to a screen
`router.pop()`	Go back to the previous screen
`router.replace(name, params?)`	Replace current screen (no back entry)
`router.reset(name, params?)`	Reset the stack to a single screen

`useRoute()`

Returns a ComputedRef<RouteLocation> for the current route. Access via .value:

Property	Type	Description
`route.value.name`	`string`	Current screen name
`route.value.params`	`Record<string, any>`	Navigation params
`route.value.options`	`RouteOptions`	Route options (title, animation, etc.)