# vue-router [![release candidate](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![test](https://github.com/vuejs/router/actions/workflows/test.yml/badge.svg)](https://github.com/vuejs/router/actions/workflows/test.yml) [![codecov](https://codecov.io/gh/vuejs/router/graph/badge.svg?token=azNM3FI0d1)](https://codecov.io/gh/vuejs/router) > - This is the repository for Vue Router 4 (for Vue 3) > - For Vue Router 3 (for Vue 2) see [vuejs/vue-router](https://github.com/vuejs/vue-router). <h2 align="center">Supporting Vue Router</h2> Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source project with its ongoing development made possible entirely by the support of Sponsors. If you would like to become a sponsor, please consider: - [Become a Sponsor on GitHub](https://github.com/sponsors/posva) - [One-time donation via PayPal](https://paypal.me/posva) <!--sponsors start--> <h4 align="center">Gold Sponsors</h4> <p align="center"> <a href="https://www.coderabbit.ai/?utm_source=vuerouter&utm_medium=sponsor" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/coderabbitai-dark.svg" media="(prefers-color-scheme: dark)" height="72px" alt="CodeRabbit" /> <img src="https://posva-sponsors.pages.dev/logos/coderabbitai-light.svg" height="72px" alt="CodeRabbit" /> </picture> </a> </p> <h4 align="center">Silver Sponsors</h4> <p align="center"> <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" /> <img src="https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" height="42px" alt="VueMastery" /> </picture> </a> <a href="https://www.prefect.io/" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg" media="(prefers-color-scheme: dark)" height="42px" alt="Prefect" /> <img src="https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg" height="42px" alt="Prefect" /> </picture> </a> <a href="https://www.controla.ai/?utm_source=posva" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/controla-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="Controla" /> <img src="https://posva-sponsors.pages.dev/logos/controla-light.png" height="42px" alt="Controla" /> </picture> </a> <a href=" https://jobs.sendcloud.com" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/sendcloud-dark.svg" media="(prefers-color-scheme: dark)" height="42px" alt="SendCloud" /> <img src="https://posva-sponsors.pages.dev/logos/sendcloud-light.svg" height="42px" alt="SendCloud" /> </picture> </a> <a href="https://route4me.com" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/route4me.png" media="(prefers-color-scheme: dark)" height="42px" alt="Route Optimizer and Route Planner Software" /> <img src="https://posva-sponsors.pages.dev/logos/route4me.png" height="42px" alt="Route Optimizer and Route Planner Software" /> </picture> </a> </p> <h4 align="center">Bronze Sponsors</h4> <p align="center"> <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/storyblok.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" /> <img src="https://posva-sponsors.pages.dev/logos/storyblok.png" height="26px" alt="Storyblok" /> </picture> </a> <a href="https://nuxtlabs.com" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/nuxt-dark.svg" media="(prefers-color-scheme: dark)" height="26px" alt="NuxtLabs" /> <img src="https://posva-sponsors.pages.dev/logos/nuxt-light.svg" height="26px" alt="NuxtLabs" /> </picture> </a> <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" /> <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" /> </picture> </a> </p> <!--sponsors end--> --- Get started with the [documentation](https://router.vuejs.org). ## Quickstart - Via CDN: `<script src="https://unpkg.com/vue-router@4"></script>` - In-browser playground on [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-hb9lh) - Add it to an existing Vue Project: ```bash npm install vue-router@4 ``` ## Changes from Vue Router 3 Please consult the [Migration Guide](https://router.vuejs.org/guide/migration/). ## Contributing See [Contributing Guide](https://github.com/vuejs/router/blob/main/.github/contributing.md). ## Special Thanks <a href="https://www.browserstack.com"> <img src="https://github.com/vuejs/vue-router/raw/dev/assets/browserstack-logo-600x315.png" height="80" title="BrowserStack Logo" alt="BrowserStack Logo" /> </a> Special thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser specific issues.