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 issue or make a PR if you spot any problems or you have any further requests regarding the functionality.
Table of Contents
Features
- Same hooks and guards for mobile and web
- Additional action dispatcher to dispatch actions to store automatically when changing routes
- Vue-Router 4 API compatibility
- NativeScript-Vue compatible
- TypeScript Support out of the box
Prerequisites / Requirements
Nativescript 7.1+ is required for the plugin to run properly. It might be working on previous NS6 although the plugin is no longer officially supported for NativeScript 6.
Installation
ns plugin add nativescript-vue-router-extended
or
npm install nativescript-vue-router-extended
or
yarn add nativescript-vue-router-extended
Usage & Examples
To use this plugin you need to import it and initialize the router using createRouter()
function. Global and per component Vue-Router hooks and guards are supported.
import Vue from "nativescript-vue";
import { createRouter } from "nativescript-vue-router-extended";
import moviesPage from "./pages/movies.vue";
const routes = [
{
path: "/movies",
component: moviesPage,
meta: {
isVertical: true,
store: {
showNavigationButtons: false,
},
},
},
];
const router = createRouter(
{ routes },
{
routeBackFallbackPath: "/movies",
routeToCallback: (to, options) => {
if (to.meta.isVertical) {
options.transition = {
name: "fade",
};
}
},
routeBackCallback: (_to, options) => {
},
vm: Vue.prototype,
logger: console.log,
frame: Frame,
}
);
router.beforeEach((to) => {
if (!canAccessRoute(to)) {
return false;
}
return true;
});
this.$routeTo("/movies", {
clearHistory: true,
props: {
movieId: 12,
},
});
New hooks for pages
You can use hooks directly on particular pages. It is discouraged to use them inside of mixins or components for the time being. Example below:
<template>
<Page>
</Page>
</template>
<script>
export default {
name: 'movies',
beforeRouteEnter(to, from, next) {
next((vm) => {
});
},
beforeRouteLeave() {
},
beforeRouteUpdate() {
},
mounted() {
console.log(this.$route);
},
};
</script>
NS Event | Mapped as | Description |
---|
navigatingFrom | beforeRouteLeave | Before user leaves the route |
navigatingTo | beforeRouteEnter | Before user enters a route |
- | beforeRouteUpdate | Before route is changed but view remains the same. This can happen when path is exactly the same but you change e.g. passed prop to the route. Please refer to Vue-Router docs for more details. |
navigatedTo | beforeRouteEnter | To trigger it properly you need to access component instance. You can use next(vm => ...) callback within beforeRouteEnter() . Please check Vue-Router docs for more details. |
navigatedFrom | - | This event is tricky to control for developers. There is no exact mapping of it in the router. For store state cleanup use build-in meta dispatcher instead. For component state you could opt for using beforeRouteLeave() . |
TypeScript Support
If you need a TS support and it's not detected automatically in your project for some reason, you can use typings/shims.vue.d.ts to bring proper support in .vue files. You can specify it in your shims.vue.d.ts
file (attention! Please ensure that path is relative to your node_modules directory):
/// <reference path="./node_modules/nativescript-vue-router-extended/typings/shims-vue.d.ts" />
API & Limitations
This plugin aims for compatibility with Vue Router 3+ and Vue Router 4+. Both should be easily supported. Please refer to Vue Router Docs for more information. There are some obvious limitations like lack of DOM accessibility and related events, or lack of component.
License
Apache License Version 2.0, January 2004
Troubleshooting
Please file an issue. You can use the template but it is not required. Just simply write what is your issue so we can try to reproduce and fix it.