Vue Router 3

The scrollBehavior function must return a position descriptor. You can use the following formats:

• Coordinates: { x: number, y: number } (e.g., { x: 0, y: 0 } to scroll to top).
• Selector: { selector: string, offset?: { x: number, y: number } } to scroll to a specific element. The offset option is supported in version 2.6.0+.
• Smooth Behavior: Add behavior: 'smooth' to the object to use native smooth scrolling (where supported by the browser).

// Scroll to top
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

// Scroll to an anchor/selector
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth'
    }
  }
}

Version Compatibility Warning

vue-router 3.x is designed exclusively for Vue 2.0.

Both Vue 2.0 and vue-router 3.x have reached their end-of-life (EOL). If you are starting a new project or using Vue 3, you should use the appropriate version:

• For Vue 3 projects: Use vue-router 4.
• For legacy Vue 1.x projects: Use the 1.x branch.

You can provide a function to the props option. This function receives the route object as an argument and should return an object that will be used as the component's props. This mode is powerful because it allows you to:

• Cast parameters into different types (e.g., converting a string ID to a number).
• Combine static values with route-based values.
• Map query parameters (e.g., route.query) to specific prop names.

Note: Keep the props function stateless, as it is only evaluated on route changes. If you need to define props based on reactive state, use a wrapper component instead.

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})
// A URL like /search?q=vue will pass { query: 'vue' } as props to SearchUser

When a navigation is triggered, vue-router executes hooks in this specific order:

1. Call beforeRouteLeave guards in deactivated components.
2. Call global beforeEach guards.
3. Call beforeRouteUpdate guards in reused components.
4. Call beforeEnter in route configs.
5. Resolve async route components.
6. Call beforeRouteEnter in activated components.
7. Call global beforeResolve guards.
8. Navigation confirmed.
9. Call global afterEach hooks.
10. DOM updates triggered.
11. Call callbacks passed to next in beforeRouteEnter guards with instantiated instances.

Because vue-router uses path-to-regexp for its matching engine, it supports advanced patterns including:

• Optional dynamic segments
• Zero or more / one or more requirements
• Custom regular expression patterns

For detailed syntax and examples, refer to the path-to-regexp documentation.

A route record is an object within your routes configuration. Since routes can be nested, a single URL (e.g., /foo/bar) can match multiple route records (the parent /foo and the child /bar).

All route records that match the current URL are exposed in the $route.matched array. When implementing logic that depends on route metadata, you should inspect this array to ensure you account for properties defined on any level of the route hierarchy.

<router-link> is a component that enables user navigation in a router-supported application. It is preferred over hard-coded <a href="..."> tags because:

• It works identically in both HTML5 history mode and hash mode, allowing you to switch modes without changing your code.
• In HTML5 history mode, it prevents the browser from reloading the page by intercepting the click event.
• In HTML5 history mode, you don't need to include the base option in the to prop URL.

By default, it renders as an <a> tag with the correct href, but you can customize the rendered tag using the tag prop.

<router-link to="home">Home</router-link>

When you set props: true in a route configuration, the route.params object is passed to the component as props. This is the simplest way to map dynamic URL segments (like :id) directly to component props.

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})

You can provide a function to the props option. This function receives the route object as an argument and should return an object that will be used as the component's props. This allows you to cast parameters to different types or combine route values (like query or params) into a single prop object.

Note: The props function is only evaluated when the route changes. Do not attempt to store state within this function. If you need to manage state that changes over time, use a wrapper component instead.

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: (route) => ({ query: route.query.q })
    }
  ]
})