Table of Contents

Features

Prerequisites / Requirements

Installation

nspluginaddnativescript-vue-router-extendedornpminstallnativescript-vue-router-extendedoryarnaddnativescript-vue-router-extended

Usage & Examples

importVuefrom"nativescript-vue";import{createRouter}from"nativescript-vue-router-extended";// Initialize Example RoutesimportmoviesPagefrom"./pages/movies.vue";constroutes=[{path:"/movies",component:moviesPage,// Optionalmeta:{isVertical:true,// Example actions to dispatch automatically when page is visited// Remember that you need to implement actions in your Vuex storestore:{// Call action to hide navigation buttonsshowNavigationButtons:false,// Call "showMovies" action in "categories" module with payload "all""categories/showMovies":"all",// Call action without payloadshowNavigationButtons:null,},},// Optional, per route guards are supported// More info: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guardbeforeEnter:(to,from)=>{if(to.props.passUser){// Continue navigationreturntrue;}// Reject the navigationreturnfalse;},},];// Initialize Router// Vue-Router settings are in 1st argument. 2nd one is used for extra NativeScript related settingsconstrouter=createRouter({ routes},{// Optional settings below// Set first page to redirect to when there's no page to redirect back torouteBackFallbackPath:"/movies",// Do something straight before navigation or adjust NS routing settingsrouteToCallback:(to,options)=>{// For example, change page navigation transition for the vertical on iOSif(to.meta.isVertical){options.transition={name:"fade",};}},// Do something straight before navigation or adjust NS routing settingsrouteBackCallback:(_to,options)=>{// Do something...},// Set Vue Instance (Vue.prototype by default)vm:Vue.prototype,// Set a custom logger (console.log by default)logger:console.log,// Set custom frame, by default it's taken from @nativescript/core/ui/frameframe:Frame,});// Register a global guard (optional)// You can also use global router.beforeResolve guard and router.afterEach hookrouter.beforeEach((to)=>{// For example, verify per route access rulesif(!canAccessRoute(to)){returnfalse;}returntrue;});// From now on you can access this.$router, this.$routeBack and special this.$routeTo inside of the components, example:this.$routeTo("/movies",{// Clear History is a NativeScript settingclearHistory:true,// Route inside of custom Frameframe:"myFrameId",// Pass props to the pageprops:{movieId:12,},});

New hooks for pages

<template><Page></Page></template><script>exportdefault{name:'movies',beforeRouteEnter(to,from,next){// Do something before to enter to the routenext((vm)=>{// Do something once navigation is done// Instead of `this`, use `vm`});},beforeRouteLeave(){// Do something before to leave the route// You can use `this` inside of this hook},beforeRouteUpdate(){// Do something before to leave the route// before redirecting to another route with same path// You can use `this` inside of this hook},mounted(){// Output current route object with name, path etc.console.log(this.$route);},};</script>

TypeScript Support

/// <reference path="./node_modules/nativescript-vue-router-extended/typings/shims-vue.d.ts" />

API Differences to Web

License

Troubleshooting