{"_id":"@censujiang/router-vue-native","_rev":"3-f8f9b1d5280a7fcd4e3c4dda43a4b347","name":"@censujiang/router-vue-native","dist-tags":{"latest":"2.1.3"},"versions":{"2.1.1":{"name":"@censujiang/router-vue-native","version":"2.1.1","keywords":["Vue","Router","NativeScript","Extended","JavaScript","Android","iOS"],"author":{"name":"Matt Czaplinski","email":"deindesign.pl@gmail.com"},"license":"Apache-2.0","_id":"@censujiang/router-vue-native@2.1.1","maintainers":[{"name":"censujiang_self","email":"dfjsiou@qq.com"}],"homepage":"https://github.com/ammarahm-ed/nativescript-vue-router-extended","bugs":{"url":"https://github.com/ammarahm-ed/nativescript-vue-router-extended/issues"},"dist":{"shasum":"92944ca472cbc4d760aa619008678eb346ea8e1d","tarball":"https://registry.npmjs.org/@censujiang/router-vue-native/-/router-vue-native-2.1.1.tgz","fileCount":33,"integrity":"sha512-PfJYex4qNQiAxvtyXwlVued9QyYFPUjmFfjGvQ8pGZ7/TR86ZFXSAhZh4BLDGRZM4JY5bFtCiJ9Hc9GScTLfhQ==","signatures":[{"sig":"MEUCIH8VYq2t0MkfQYDQ3gTKEOJJcLqhsPYj6qQZgtx1ELAzAiEAuQjNztzBLqQpZUyf0UoC9biLKWibzNmY9/eRa7FVVBc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75620},"main":"./dist/index.js","types":"./dist/index.d.ts","engines":{"node":">=12"},"gitHead":"3d5680ed55fe38d60afbc685c09fdbd15d6f1f2e","scripts":{"build":"rm -rf dist && yarn tsc"},"_npmUser":{"name":"censujiang_self","actor":{"name":"censujiang_self","type":"user","email":"dfjsiou@qq.com"},"email":"dfjsiou@qq.com"},"repository":{"url":"git+https://github.com/ammarahm-ed/nativescript-vue-router-extended.git","type":"git"},"_npmVersion":"10.8.2","description":"NativeScript Vue Router Extended for NativeScript Vue hybrid Apps.","directories":{},"_nodeVersion":"20.18.2","bootstrapper":"nativescript-plugin-seed","dependencies":{"vue":"3.2.41","vue-router":"^4.1.6"},"nativescript":{"platforms":{"ios":"8.3.3","android":"8.3.3"}},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.17.0","prompt":"^1.0.0","rimraf":"^2.6.3","semver":"^5.6.0","tslint":"^5.12.1","ts-patch":"^1.3.1","typescript":"4.8.4","@nativescript/core":"^8.3.5","@nativescript/types":"^8.3.1","@nativescript/webpack":"^5.0.9","@typescript-eslint/parser":"^4.12.0","@typescript-eslint/eslint-plugin":"^4.12.0","@typescript-eslint/eslint-plugin-tslint":"^4.12.0"},"_npmOperationalInternal":{"tmp":"tmp/router-vue-native_2.1.1_1750328325515_0.2697936689179683","host":"s3://npm-registry-packages-npm-production"}},"2.1.2":{"name":"@censujiang/router-vue-native","version":"2.1.2","keywords":["Vue","Router","NativeScript","Extended","JavaScript","Android","iOS"],"author":{"name":"Matt Czaplinski","email":"deindesign.pl@gmail.com"},"license":"Apache-2.0","_id":"@censujiang/router-vue-native@2.1.2","maintainers":[{"name":"censujiang_self","email":"dfjsiou@qq.com"}],"homepage":"https://github.com/ammarahm-ed/nativescript-vue-router-extended","bugs":{"url":"https://github.com/ammarahm-ed/nativescript-vue-router-extended/issues"},"dist":{"shasum":"eecbf9952c587bcb7df685235376be9eb4473c19","tarball":"https://registry.npmjs.org/@censujiang/router-vue-native/-/router-vue-native-2.1.2.tgz","fileCount":33,"integrity":"sha512-a3G66Q3uiurjM5YLUG3Be37ei5ID5befV2zW3Pf3QW/v51gf/mwq9oi32OpAoUc6sufq/XYhAulIzKtFdT73Ig==","signatures":[{"sig":"MEYCIQDnaQ73G18r14w1Bh3A/BDKqVNzuyx/erA3tFaKCv/V+AIhAOG9+KO5wrLVM4R1j2+aaWLdqe/SloWgK3qe8/MJ5rjW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76187},"main":"./dist/index.js","types":"./dist/index.d.ts","engines":{"node":">=12"},"gitHead":"24c0fcb63629fb84affc646e8620a1e91033cbc2","scripts":{"build":"rm -rf dist && yarn tsc"},"_npmUser":{"name":"censujiang_self","actor":{"name":"censujiang_self","type":"user","email":"dfjsiou@qq.com"},"email":"dfjsiou@qq.com"},"repository":{"url":"git+https://github.com/ammarahm-ed/nativescript-vue-router-extended.git","type":"git"},"_npmVersion":"10.8.2","description":"NativeScript Vue Router Extended for NativeScript Vue hybrid Apps.","directories":{},"_nodeVersion":"20.18.2","bootstrapper":"nativescript-plugin-seed","dependencies":{"vue":"3.2.41","vue-router":"^4.1.6"},"nativescript":{"platforms":{"ios":"8.3.3","android":"8.3.3"}},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.17.0","prompt":"^1.0.0","rimraf":"^2.6.3","semver":"^5.6.0","tslint":"^5.12.1","ts-patch":"^1.3.1","typescript":"4.8.4","@nativescript/core":"^8.3.5","@nativescript/types":"^8.3.1","@nativescript/webpack":"^5.0.9","@typescript-eslint/parser":"^4.12.0","@typescript-eslint/eslint-plugin":"^4.12.0","@typescript-eslint/eslint-plugin-tslint":"^4.12.0"},"_npmOperationalInternal":{"tmp":"tmp/router-vue-native_2.1.2_1750329560410_0.4218872022392861","host":"s3://npm-registry-packages-npm-production"}},"2.1.3":{"name":"@censujiang/router-vue-native","version":"2.1.3","description":"NativeScript Vue Router Extended for NativeScript Vue hybrid Apps.","main":"./dist/index.js","nativescript":{"platforms":{"android":"8.3.3","ios":"8.3.3"}},"repository":{"type":"git","url":"git+https://github.com/ammarahm-ed/nativescript-vue-router-extended.git"},"keywords":["Vue","Router","NativeScript","Extended","JavaScript","Android","iOS"],"author":{"name":"Matt Czaplinski","email":"deindesign.pl@gmail.com"},"bugs":{"url":"https://github.com/ammarahm-ed/nativescript-vue-router-extended/issues"},"scripts":{"build":"rm -rf dist && yarn tsc"},"license":"Apache-2.0","homepage":"https://github.com/ammarahm-ed/nativescript-vue-router-extended","devDependencies":{"@nativescript/core":"^8.3.5","@nativescript/types":"^8.3.1","@nativescript/webpack":"^5.0.9","@typescript-eslint/eslint-plugin":"^4.12.0","@typescript-eslint/eslint-plugin-tslint":"^4.12.0","@typescript-eslint/parser":"^4.12.0","eslint":"^7.17.0","prompt":"^1.0.0","rimraf":"^2.6.3","semver":"^5.6.0","ts-patch":"^1.3.1","tslint":"^5.12.1","typescript":"4.8.4"},"bootstrapper":"nativescript-plugin-seed","dependencies":{"vue-router":"^4.1.6","vue":"3.2.41"},"engines":{"node":">=12"},"_id":"@censujiang/router-vue-native@2.1.3","gitHead":"240d9f33c451fba9983777d6e401d96ea8568ebb","types":"./dist/index.d.ts","_nodeVersion":"20.18.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-LNr5EUBNBPdvasmqZH4dW0I3F57bKXuvU7BZRkICSOa2vJvPS+Q4JKUTwBF/0e8CKRIXreO1Z/p/GKhlqEFHpw==","shasum":"cf8cebfc354f4f36db540c6c82d12b2829207133","tarball":"https://registry.npmjs.org/@censujiang/router-vue-native/-/router-vue-native-2.1.3.tgz","fileCount":33,"unpackedSize":75801,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF0zQrD8B3Uci9KCLUtPUFaJq6HmOSJJJtudtw96IqxiAiBLdbhIBz6rEoGWL58eg6qjBovsru+oSra3dC1RgOJ6xQ=="}]},"_npmUser":{"name":"censujiang_self","email":"dfjsiou@qq.com","actor":{"name":"censujiang_self","email":"dfjsiou@qq.com","type":"user"}},"directories":{},"maintainers":[{"name":"censujiang_self","email":"dfjsiou@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/router-vue-native_2.1.3_1750331549561_0.7405071390251308"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-19T10:18:45.384Z","modified":"2025-06-19T11:12:29.947Z","2.1.1":"2025-06-19T10:18:45.701Z","2.1.2":"2025-06-19T10:39:20.607Z","2.1.3":"2025-06-19T11:12:29.731Z"},"bugs":{"url":"https://github.com/ammarahm-ed/nativescript-vue-router-extended/issues"},"author":{"name":"Matt Czaplinski","email":"deindesign.pl@gmail.com"},"license":"Apache-2.0","homepage":"https://github.com/ammarahm-ed/nativescript-vue-router-extended","keywords":["Vue","Router","NativeScript","Extended","JavaScript","Android","iOS"],"repository":{"type":"git","url":"git+https://github.com/ammarahm-ed/nativescript-vue-router-extended.git"},"description":"NativeScript Vue Router Extended for NativeScript Vue hybrid Apps.","maintainers":[{"name":"censujiang_self","email":"dfjsiou@qq.com"}],"readme":"# NativeScript Vue Router\n\n[npm-url]: https://npmjs.org/package/router-vue-native\n[npm-image]: http://img.shields.io/npm/v/router-vue-native.svg\n\n[![NPM version][npm-image]][npm-url] [![Blazing Fast](https://badgen.now.sh/badge/speed/blazing%20%F0%9F%94%A5/green)](https://github.com/MattCCC/nativescript-vue-router-extended) [![Code Coverage](https://badgen.now.sh/badge/coverage/0.00/blue)](https://github.com/MattCCC/nativescript-vue-router-extended) [![npm downloads](https://img.shields.io/npm/dm/nativescript-vue-router-extended.svg?style=flat-square)](http://npm-stat.com/charts.html?package=nativescript-vue-router-extended) [![install size](https://packagephobia.now.sh/badge?p=nativescript-vue-router-extended)](https://packagephobia.now.sh/result?p=nativescript-vue-router-extended)\n\n[nativescript-vue-router-extended](https://github.com/mattCCC/nativescript-vue-router-extended)\n\nNativeScript Vue Router brings easier routing handling to mobile apps, with an API compatibility with web version of Vue Router.\n\nPlease file an issue or make a PR if you spot any problems or you have any further requests regarding the functionality.\n\n## Table of Contents\n\n- [Features](#features)\n- [Prerequisites / Requirements](#prerequisites-requirements)\n- [Installation](#installation)\n- [Usage & Examples](#usage-examples)\n- [New hooks for pages](#new-hooks-for-pages)\n- [TypeScript](#typescript)\n- [API Differences to Web](#api-differences-to-web)\n- [Troubleshooting](#troubleshooting)\n\n## Features\n\n- Same hooks and guards for mobile and web\n- Additional action dispatcher to dispatch actions to store automatically when changing routes\n- Vue-Router 4 API compatibility\n- NativeScript-Vue compatible\n- TypeScript Support out of the box\n\n## Prerequisites / Requirements\n\nNativescript 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.\n\n## Installation\n\n```javascript\nns plugin add router-vue-native\n\nor\n\nnpm install router-vue-native\n\nor\n\nyarn add router-vue-native\n```\n\n[![NPM](https://nodei.co/npm/router-vue-native.png)](https://npmjs.org/package/router-vue-native)\n\n## Usage & Examples\n\nTo 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.\n\n# Vue 3 example\n\n### Add your router to vue app\n```ts\n// app.ts\n\nimport { createApp } from 'nativescript-vue';\nimport App from './App.vue';\nimport {router} from \"~/plugins/router\";\nconst app = createApp(App);\napp.use(router)\napp.start();\n```\n\n### Create router\n```ts\n// /plugins/router.ts\n\nimport {createRouter} from \"router-vue-native\";\nimport Home from \"~/views/Home.vue\";\nimport Login from \"~/views/Login.vue\";\n\nconst routes = [\n    {\n        path: \"/\",\n        component: Home,\n    },\n    {\n        path: \"/login\",\n        component: Login,\n    }\n];\n\nconst router = createRouter(\n    {routes},\n);\n\nexport {\n    router\n}\n```\n\n### Define the default path of your application\n```vue\n// App.vue\n<template>\n  <RouterView defaultRoute=\"/login\"></RouterView>\n</template>\n\n// OR\n\n<script setup lang=\"ts\">\nconst getDefaultRouteExample = () => {\n  if (isLoginUser) {\n    return \"/login\"\n  } else {\n    return \"/\"\n  }\n}\n</script>\n<template>\n  <RouterView :defaultRoute=\"getDefaultRouteExample\"></RouterView>\n</template>\n```\n### Use on setup template\n```vue\n<script lang=\"ts\" setup>\nimport {useRouter} from \"router-vue-native\";\n\n// get router\nconst router = useRouter();\n\nconst onNavigete = () => {\n  // navigate\n  router.push(\"/your_path\")\n}\n\n</script>\n```\n\n## Vue 2 and full options\n\n\n```javascript\nimport Vue from \"nativescript-vue\";\nimport { createRouter } from \"nativescript-vue-router-extended\";\n\n// Initialize Example Routes\nimport Home from \"./pages/Home.vue\";\nimport Login from \"./pages/Login.vue\";\n\nconst routes = [\n  {\n    path: \"/\",\n    component: Home,\n\n    // Optional\n    meta: {\n      isVertical: true,\n      // Example actions to dispatch automatically when page is visited\n      // Remember that you need to implement actions in your Vuex store\n      store: {\n        // Call action to hide navigation buttons\n        showNavigationButtons: false,\n\n        // Call \"showMovies\" action in \"categories\" module with payload \"all\"\n        \"categories/showMovies\": \"all\",\n\n        // Call action without payload\n        showNavigationButtons: null,\n      },\n    },\n    {\n        path: \"/login\",\n        component: Login,\n    }\n\n    // Optional, per route guards are supported\n    // More info: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard\n    beforeEnter: (to, from) => {\n      if (to.props.passUser) {\n         // Continue navigation\n         return true;\n      }\n\n      // Reject the navigation\n      return false;\n    },\n  },\n];\n\n// Initialize Router\n// Vue-Router settings are in 1st argument. 2nd one is used for extra NativeScript related settings\nconst router = createRouter(\n  { routes },\n  {\n    // Optional settings below\n\n    // Set first page to redirect to when there's no page to redirect back to\n    routeBackFallbackPath: \"/login\",\n\n    // Do something straight before navigation or adjust NS routing settings\n    routeToCallback: (to, options) => {\n      // For example, change page navigation transition for the vertical on iOS\n      if (to.meta.isVertical) {\n        options.transition = {\n          name: \"fade\",\n        };\n      }\n    },\n\n    // Do something straight before navigation or adjust NS routing settings\n    routeBackCallback: (_to, options) => {\n      // Do something...\n    },\n\n    // Set a custom logger (console.log by default)\n    logger: console.log,\n\n    // Set custom frame, by default it's taken from @nativescript/core/ui/frame\n    frame: Frame,\n  }\n);\n\n// Register a global guard (optional)\n// You can also use global router.beforeResolve guard and router.afterEach hook\nrouter.beforeEach((to) => {\n  // For example, verify per route access rules\n  if (!canAccessRoute(to)) {\n    return false;\n  }\n\n  return true;\n});\n\n// From now on you can access this.$router, this.$routeBack and special this.$routeTo inside of the components, example:\nthis.$routeTo(\"/movies\", {\n  // Clear History is a NativeScript setting\n  clearHistory: true,\n  \n  // Route inside of custom Frame\n  frame: \"myFrameId\",\n\n  // Pass props to the page\n  props: {\n    movieId: 12,\n  },\n});\n```\n\n\n\n## New hooks for pages\n\nYou can use hooks directly on particular pages. It is discouraged to use them inside of mixins or components for the time being. Example below:\n\n```javascript\n<template>\n    <Page>\n    </Page>\n</template>\n\n<script>\n\nexport default {\n    name: 'movies',\n\n    beforeRouteEnter(to, from, next) {\n        // Do something before to enter to the route\n        next((vm) => {\n            // Do something once navigation is done\n            // Instead of `this`, use `vm`\n        });\n    },\n\n    beforeRouteLeave() {\n        // Do something before to leave the route\n        // You can use `this` inside of this hook\n    },\n\n    beforeRouteUpdate() {\n        // Do something before to leave the route\n        // before redirecting to another route with same path\n        // You can use `this` inside of this hook\n    },\n\n    mounted() {\n       // Output current route object with name, path etc.\n       console.log(this.$route);\n    },\n};\n</script>\n```\n\n| NS Event       | Mapped as           | Description                                                                                                                                                                                                                                                                                                  |\n| -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| navigatingFrom | `beforeRouteLeave`  | Before user leaves the route                                                                                                                                                                                                                                                                                 |\n| navigatingTo   | `beforeRouteEnter`  | Before user enters a route                                                                                                                                                                                                                                                                                   |\n| -              | `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.                                                                                                             |\n| 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.                                                                                                                             |\n| 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()`. |\n\n## TypeScript Support\nIf 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](https://github.com/MattCCC/nativescript-vue-router-extended/blob/master/src/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):\n```\n/// <reference path=\"./node_modules/nativescript-vue-router-extended/typings/shims-vue.d.ts\" />\n```\n\n## API Differences to Web\n\n<b>Vue Router compatibility</b>\n\nThis plugin aims for compatibility with Vue Router 3+ and Vue Router 4+. Both should be easily supported. Please refer to [Vue Router Docs](https://next.router.vuejs.org/guide/) for more information.\n\n<b>DOM & related hooks</b>\n\nThere are some limitations like lack of DOM accessibility and related hooks and guards.\n\n<b>RouterLink Component</b>\n\nThere's a lack of <router-link /> component due to performance reasons.\n\n<b>Passing props to pages</b>\n\nAll props are passed automatically to <Page /> components. Therefore you don't need to use `props: true` in your routes list.\n\n<b>Meta Dispatcher</b>\n\nAn additional option that allows you to dispatch actions to Vuex store directly from routes list using `meta.store` object. To utilize it you may need to define `Vue.prototype.$store = store;` after to register your Vue store.\n\n\n## License\n\nApache License Version 2.0, January 2004\n\n## Troubleshooting\n\nPlease 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.\n","readmeFilename":"README.md"}