Employee Spotlight
From Academia to Industry
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
vue-router
Advanced tools
Package description
The vue-router npm package is the official router for Vue.js. It integrates closely with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include nested routes/mappings, modular, component-based router configuration, route params, query, wildcards, transitions, fine-grained navigation control, and view transition effects powered by Vue.js' transition system.
Dynamic Route Matching
This feature allows you to create routes that are dynamically matched to the path. For example, different user IDs can be matched to the same route pattern.
{"const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}"}
Nested Routes
This feature allows you to map nested paths to components. It's useful for creating sub-sections of a page without having to create complex configurations.
{"const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// UserProfile will be rendered inside User's <router-view>
path: 'profile',
component: UserProfile
}
]
}
]
})
const User = {
template: '<div>User <router-view></router-view></div>'
}"}
Programmatic Navigation
Vue-router allows you to navigate without using <router-link> by using the router instance methods.
{"router.push('/home')
router.replace('/home')
router.go(-1)"}
Named Routes
Instead of using URLs, you can navigate using route names, making your code more readable and maintainable.
{"const router = new VueRouter({
routes: [
{ name: 'user', path: '/user/:id', component: User }
]
})
// navigate to a named route
router.push({ name: 'user', params: { id: 123 }})"}
Route Guards
Route guards are used to protect routes that require authentication, perform checks before entering a route, or confirm navigation away from a route.
{"const router = new VueRouter({
routes: [
{ path: '/secret', component: Secret, beforeEnter: (to, from, next) => {
// ... guard logic
next();
}}
]
})"}
React Router is a standard library for routing in React. It has a similar set of features to vue-router, such as dynamic route matching, nested routes, and navigation control, but it is designed for React instead of Vue.
Angular's router is a powerful navigation library for Angular. It offers features like lazy loading, nested routes, and route guards. It is comparable to vue-router but is used within the Angular ecosystem.
Reach Router is a small, simple router for React that is accessible and easy to use. It is similar to vue-router but with a focus on simplicity and accessibility.
Next.js has its own router that supports features like dynamic routes and server-side rendering. It is designed specifically for Next.js applications and offers a different approach compared to vue-router.
Readme
This is the repository for Vue Router 4 (for Vue 3)
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:
Get started with the documentation.
<script src="https://unpkg.com/vue-router@4"></script>
npm install vue-router@4
Please consult the Migration Guide.
See Contributing Guide.
Special thanks to BrowserStack for letting the maintainers use their service to debug browser specific issues.
FAQs
> - 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).
The npm package vue-router receives a total of 1,815,967 weekly downloads. As such, vue-router popularity was classified as popular.
We found that vue-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Employee Spotlight
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.