vue-router

What is vue-router?

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.

What are vue-router's main functionalities?

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();
    }}
  ]
})"}

Other packages similar to vue-router

react-router

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-router

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

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.

README

vue-router

This is vue-router 3.0 which works only with Vue 2.0. For the 1.x router see the 1.0 branch.

Introduction

vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

• Nested route/view mapping
• Modular, component-based router configuration
• Route params, query, wildcards
• View transition effects powered by Vue.js' transition system
• Fine-grained navigation control
• Links with automatic active CSS classes
• HTML5 history mode or hash mode, with auto-fallback in IE9
• Customizable Scroll Behavior

Get started with the documentation, or play with the examples (see how to run them below).

Development Setup

# install deps
npm install

# build dist files
npm run build

# serve examples at localhost:8080
npm run dev

# lint & run all tests
npm test

# serve docs at localhost:8080
npm run docs

Releasing

• yarn run release
  • Ensure tests are passing yarn run test
  • Build dist files VERSION=<the_version> yarn run build
  • Build changelog yarn run changelog
  • Commit dist files git add dist CHANGELOG.md && git commit -m "[build $VERSION]"
  • Publish a new version `npm version $VERSION --message "[release] $VERSION"
  • Push tags git push origin refs/tags/v$VERSION && git push
  • Publish to npm npm publish

Questions

For questions and support please use the Discord chat server or the official forum. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Changelog

Details changes for each release are documented in the CHANGELOG.md file.

Stay In Touch

• For latest releases and announcements, follow on Twitter: @vuejs

License

MIT

Copyright (c) 2013-present Evan You

Special Thanks

Special thanks to BrowserStack for letting the maintainers use their service to debug browser specific issues.