1 | # vue-router [![release candidate](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![CircleCI](https://badgen.net/circleci/github/vuejs/router/main)](https://circleci.com/gh/vuejs/router)
|
2 |
|
3 | > This is the repository for Vue Router 4 (for Vue 3)
|
4 |
|
5 | <h2 align="center">Supporting Vue Router</h2>
|
6 |
|
7 | 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:
|
8 |
|
9 | - [Become a Sponsor on GitHub](https://github.com/sponsors/posva)
|
10 | - [One-time donation via PayPal](https://paypal.me/posva)
|
11 |
|
12 |
|
13 | <h3 align="center">Platinum Sponsors</h3>
|
14 | <p align="center">
|
15 | <a href="https://www.finclip.com/#/home?from=vue" target="_blank" rel="noopener noreferrer">
|
16 | <picture>
|
17 | <source srcset="https://posva-sponsors.pages.dev/logos/fincliplogo_white_svg.svg" media="(prefers-color-scheme: dark)" height="96px" alt="Finogeeks" />
|
18 | <img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" height="96px" alt="Finogeeks" />
|
19 | </picture>
|
20 | </a>
|
21 | </p>
|
22 |
|
23 | <h4 align="center">Gold Sponsors</h4>
|
24 | <p align="center">
|
25 | <a href="https://vuejobs.com/?utm_source=vuerouter&utm_campaign=sponsor" target="_blank" rel="noopener noreferrer">
|
26 | <picture>
|
27 | <source srcset="https://posva-sponsors.pages.dev/logos/vuejobs.svg" media="(prefers-color-scheme: dark)" height="72px" alt="VueJobs" />
|
28 | <img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" height="72px" alt="VueJobs" />
|
29 | </picture>
|
30 | </a>
|
31 | </p>
|
32 |
|
33 | <h4 align="center">Silver Sponsors</h4>
|
34 | <p align="center">
|
35 | <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer">
|
36 | <picture>
|
37 | <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" />
|
38 | <img src="https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" height="42px" alt="VueMastery" />
|
39 | </picture>
|
40 | </a>
|
41 | <a href="https://www.prefect.io/" target="_blank" rel="noopener noreferrer">
|
42 | <picture>
|
43 | <source srcset="https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg" media="(prefers-color-scheme: dark)" height="42px" alt="Prefect" />
|
44 | <img src="https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg" height="42px" alt="Prefect" />
|
45 | </picture>
|
46 | </a>
|
47 | <a href="https://birdeatsbug.com/?utm_source=vuerouter&utm_medium=sponsor&utm_campaign=silver" target="_blank" rel="noopener noreferrer">
|
48 | <picture>
|
49 | <source srcset="https://posva-sponsors.pages.dev/logos/birdeatsbug-light.svg" media="(prefers-color-scheme: dark)" height="42px" alt="Bird Eats Bug" />
|
50 | <img src="https://posva-sponsors.pages.dev/logos/birdeatsbug-dark.svg" height="42px" alt="Bird Eats Bug" />
|
51 | </picture>
|
52 | </a>
|
53 | </p>
|
54 |
|
55 | <h4 align="center">Bronze Sponsors</h4>
|
56 | <p align="center">
|
57 | <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer">
|
58 | <picture>
|
59 | <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" />
|
60 | <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" />
|
61 | </picture>
|
62 | </a>
|
63 | <a href="www.vuejs.de" target="_blank" rel="noopener noreferrer">
|
64 | <picture>
|
65 | <source srcset="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Antony Konstantinidis" />
|
66 | <img src="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" height="26px" alt="Antony Konstantinidis" />
|
67 | </picture>
|
68 | </a>
|
69 | <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer">
|
70 | <picture>
|
71 | <source srcset="https://posva-sponsors.pages.dev/logos/storyblok.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" />
|
72 | <img src="https://posva-sponsors.pages.dev/logos/storyblok.png" height="26px" alt="Storyblok" />
|
73 | </picture>
|
74 | </a>
|
75 | <a href="https://nuxtjs.org" target="_blank" rel="noopener noreferrer">
|
76 | <picture>
|
77 | <source srcset="https://posva-sponsors.pages.dev/logos/nuxt-dark.svg" media="(prefers-color-scheme: dark)" height="26px" alt="NuxtJS" />
|
78 | <img src="https://posva-sponsors.pages.dev/logos/nuxt-light.svg" height="26px" alt="NuxtJS" />
|
79 | </picture>
|
80 | </a>
|
81 | </p>
|
82 |
|
83 |
|
84 |
|
85 | ---
|
86 |
|
87 | Get started with the [documentation](https://router.vuejs.org).
|
88 |
|
89 | ## Quickstart
|
90 |
|
91 | - Via CDN: `<script src="https://unpkg.com/vue-router@4"></script>`
|
92 | - In-browser playground on [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-hb9lh)
|
93 | - Add it to an existing Vue Project:
|
94 | ```bash
|
95 | npm install vue-router@4
|
96 | ```
|
97 |
|
98 | ## Changes from Vue Router 3
|
99 |
|
100 | Please consult the [Migration Guide](https://router.vuejs.org/guide/migration/).
|
101 |
|
102 | ## Contributing
|
103 |
|
104 | See [Contributing Guide](https://github.com/vuejs/router/blob/main/.github/contributing.md).
|
105 |
|
106 | ## Special Thanks
|
107 |
|
108 | <a href="https://www.browserstack.com">
|
109 | <img src="https://github.com/vuejs/vue-router/raw/dev/assets/browserstack-logo-600x315.png" height="80" title="BrowserStack Logo" alt="BrowserStack Logo" />
|
110 | </a>
|
111 |
|
112 | Special thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser specific issues.
|
113 |
|
\ | No newline at end of file |