{"id":13423944,"url":"https://github.com/ayamflow/vue-route","last_synced_at":"2025-07-30T10:32:38.172Z","repository":{"id":22863066,"uuid":"26210766","full_name":"ayamflow/vue-route","owner":"ayamflow","description":"Routing directive for Vue.js, inspired by ng-view.","archived":false,"fork":false,"pushed_at":"2016-11-04T21:00:45.000Z","size":150,"stargazers_count":74,"open_issues_count":2,"forks_count":9,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-11T16:52:20.698Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayamflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-05T08:42:52.000Z","updated_at":"2024-08-03T10:47:32.000Z","dependencies_parsed_at":"2022-08-21T13:30:42.141Z","dependency_job_id":null,"html_url":"https://github.com/ayamflow/vue-route","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvue-route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvue-route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvue-route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvue-route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayamflow","download_url":"https://codeload.github.com/ayamflow/vue-route/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228124602,"owners_count":17873170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:45.418Z","updated_at":"2024-12-04T14:12:12.430Z","avatar_url":"https://github.com/ayamflow.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"vue-route\n=======\n\n## Vue-route is discontinued. Try the official [vue-router](https://github.com/vuejs/vue-router) instead.\n\nRouting directive for Vue.js, inspired by ng-view.\nBased on `v-component` thus benefits from `v-transition`, `keep-alive`, `wait-for`, `transition-mode`.\n\nVersions 1.5.0+ are made for **Vue.js v0.12+.**\nUse older versions for Vue.js v0.11.\n\nAllows you to declare your routes on the `$root` Vue object:\n\n```js\nvar root = new Vue({\n    el: 'body',\n\n    routes: {\n        '/home': {\n            componentId: 'fg-home',\n            isDefault: true\n        },\n        '/items/:item': {\n            componentId: 'fg-item',\n            afterUpdate: 'updateHeader',\n            data: {\n                defaultColor: '#3453DD'\n            }\n        },\n        options: {\n            hashbang: true\n        }\n    }\n});\n\n```\n\nWith minimal markup:\n\n```html\n\u003cbody\u003e\n    \u003cdiv v-route\u003e\u003c/div\u003e\n\u003c/body\u003e\n\n```\n\n`vue-route` extends the `v-component` directive by @yyx990803 (on the [vuejs repo](https://github.com/yyx990803/vue/tree/master/src/directives/component.js)). Buy him a coffee if you can.\n\n## Get started\n\n**1.** Install with npm/component(1): `npm i vue-route --save` or `component install ayamflow/vue-route`.\n\n**2.** Require and install the plugin:\n\n```js\nvar Vue = require('vue'),\n    route = require('vue-route');\n\nVue.use(route); // BOOM\n```\n\n**3.** Put the `\u003cdiv v-route\u003e\u003c/div\u003e` in your main template.\n\n**4.** Pass your routes to the `$root` VM of you app (see example above).\n\n**5.** Profit !\n\n## Transition, keep-alive and other directives\nIf you want to add custom transitions between your pages, it's recommended to put them on each page's component template. Putting anything on the `v-route` element itself will only be active if you change this element (for instance with a `v-if` directive).\nFollowing the example, that would be:\n\n```js\n\u003cdiv class=\"Home\" v-transition=\"homeTransition\"\u003e...\u003c/div\u003e // fg-home component\n```\n\n## Additional infos\n\n* Routes definition: when you pass your routes to the `$root`, you can pass several properties:\n    * `componentId`: the Vue.component id for the associated template/VM.\n    * `beforeUpdate`: a callback (method or name of method on the vm) to call before effectively changing to this routehtml.\n    * `afterUpdate`: a callback (method or name of method on the vm) to call after effectively having changed to this route.\n    * `data`: an object (or function returning an object) that will be **merged** with the view's `$data`. This is useful when we need to use the same component for different urls but using different data.\n    * `isDefault`: boolean indicating wether this page should be the default, in case of non-existing URL. Think of it as the `otherwise` from Angular, so basically a 404 or the home page.\n\n`beforeUpdate` is a middleware, this means you need to call the `next` function provided as the third argument, to continue routing. This allows to prevent a route based on some condition.\nFor instance, you can `return` before `next` is called to cancel the route; usefull for an authentication page for instance.\nAnother instance is to pause the app during loading and calling `next` when everything is loaded, thus resuming the flow.\n\nVue is augmented with an additional method, `Vue.navigate(path, [trigger])`. [trigger] is a boolean (defaults to true) that will `pushState` if true, `replaceState` otherwise.\n\n* The router will emit events on your `$root` VM: `router:started`, `router:beforeUpdate`, `router:afterUpdate`.\n\n* You can pass a `options` hash to pass configuration to the router:\n    * `hashbang`: boolean (defaults to false) to use `#!` urls. Note that your links shouldn't include hashbangs, the router handles this.\n    * `click`: boolean (defaults to true) to automatically bind all click to the router. Not that if `false`, you will need to explicitly call `Vue.navigate` method).\n    * `base`: string (defaults to '/') to specify the base path.\n    * `broadcast`: boolean (defaults to false) if true the events will be emitted using the $root `$broadcast` method, so all child VMs will receive the event until a handler `return false;`. If false, it uses `$emit`.\n    * `debug`: boolean (defaults to false) to activate logging from the directive.\n\n## Location context\n\nWhen the router emits an event, 2 parameters are passed: `location` and `oldLocation`. Like in Angular, it is an object containing some useful properties:\n* `regexp`: the route regexp, such as `/items/:item`.\n* `path`: the current path, such as `/items/razor/`.\n* `params`: a hash of the params from the route, here `{item: 'razor'}`.\n* `componentId`: the componentId associated to the current route.\n\n## Route parameters\n\nEach component used by `v-route` will have its `$data` extended with the `location.params` array (see above). That means that on the route `/items/razor`, `this.$data.$routeParams.item == 'razor'`.\n\n## Subroutes\nManaging subviews with subroutes like `/route/:firstParam/:secondParam` is userland responsability; you should handle this with a `v-component` or programmatically.\n\n## Compatibility note\nvue-route supports the same browsers as Vue; however to make it properly work on IE9 you need to add the [HTML5-history-API polyfill](https://github.com/devote/HTML5-History-API).\n\n## Contributing\n\n* Fork \u0026 PR on **[dev](https://github.com/ayamflow/vue-route/tree/dev)** branch.\n* If possible, add tests to cover the changes.\n* Code style: 4 tabs, semicolons. Check the code if in doubt.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fvue-route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayamflow%2Fvue-route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fvue-route/lists"}