vue-router

You can use a function in the redirect property to calculate a new path relative to the current one. The function receives the target route object, allowing you to manipulate the path string (e.g., using .replace()) to create relative redirects.

const routes = [
  {
    // will always redirect /users/123/posts to /users/123/profile
    path: '/users/:id/posts',
    redirect: to => {
      return to.path.replace(/posts$/, 'profile')
    },
  },
]

Memory mode does not interact with the browser URL and does not automatically trigger initial navigation. This mode is ideal for Node.js environments or Server-Side Rendering (SSR).

Requirements & Caveats:

• You must manually push the initial navigation after calling app.use(router).
• If used in a browser, there will be no browser history (no back/forward button support).

import { createRouter, createMemoryHistory } from 'vue-router'

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    // ...
  ],
})

Navigations in Vue Router are asynchronous. When calling router.push, you should await the returned Promise to ensure subsequent code executes only after the navigation attempt has finished.

Note that a resolved promise does not necessarily mean a successful page change; it could also mean a navigation failure occurred.

await router.push('/my-profile')
// This code runs after the navigation attempt finishes
this.isMenuOpen = false

Because definePage() is a global macro, ESLint will flag it as an undefined variable unless it is explicitly declared. Add definePage to the globals section of your ESLint configuration with a readonly value.

{
  "globals": {
    "definePage": "readonly"
  }
}

To keep route components alive or apply transitions between route changes, wrap the <component :is="Component" /> inside the <router-view> slot using Vue's built-in <keep-alive> or <transition> components.

<!-- Using KeepAlive -->
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

<!-- Using Transition -->
<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

<!-- Using both KeepAlive inside Transition -->
<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

The base option is no longer a top-level router option. It must be passed as the first argument to the history function (e.g., createWebHistory).

import { createRouter, createWebHistory } from 'vue-router'

createRouter({
  history: createWebHistory('/base-directory/'),
  routes: [],
})

There are two ways to apply a parser to a path parameter:

1. File-based naming: Rename your route file to include the parser name in the segment, e.g., [id=int].vue or [productId=uuid].vue.
2. definePage configuration: Declare the parser within the definePage macro.

<!-- src/pages/users/[id].vue -->
<script setup lang="ts">
definePage({
  params: {
    path: {
      id: 'number',
    },
  },
})
</script>

To migrate from manual route arrays to file-based routing:

1. Move your page components to src/pages and rename them according to file-based conventions (e.g., Home.vue becomes index.vue).
2. Import routes and handleHotUpdate from vue-router/auto-routes.
3. Replace your manual routes array with the imported routes.
4. Use handleHotUpdate(router) within an if (import.meta.hot) block to allow route updates at runtime without page reloads.

import { createRouter, createWebHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

// This will update routes at runtime without reloading the page
if (import.meta.hot) {
  handleHotUpdate(router)
}

The append prop is removed. To achieve the same behavior, manually concatenate the path. You can define a global append function on your App instance to simplify this.

<!-- Replace this: -->
<router-link to="child-route" append>to relative child</router-link>

<!-- With this: -->
<router-link :to="append($route.path, 'child-route')">
  to relative child
</router-link>

// Define global helper
app.config.globalProperties.append = (path, pathToAppend) =>
  path + (path.endsWith('/') ? '' : '/') + pathToAppend