vue-router-dom

vue-router-dom

vue-router-dom is an implementation of react-router for vue 3, providing components and hooks for routing.

Table of contents

• Install
• API
• Non-standard APIs
  • Install
  • Components
    • Route
      • v-slot:element
    • HashRouter
    • StaticRouter
  • Hooks
    • useInRouterContext

Install

npm i vue-router-dom

API

For API documentaiton, please visit React Router API.

Non-standard APIs

install

The install export is a function that registers all the components globally

import { install } from 'vue-router-dom'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App).use(install)

app.mount('#app')

Components

Route

v-slot:element

Element slot can be used over element prop.

If both are present element slot will overwrite element prop.

<!-- App.vue -->
<template>
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Home />
        </Route>
        <Route path="users">
          <template #element>
            <Users />
          </template>
          <template #default>
            <Route path="/">
              <UsersIndex />
            </Route>
            <Route path=":id">
              <UserProfile />
            </Route>
            <Route path="me">
              <OwnUserProfile />
            </Route>
          </template>
        </Route>
      </Routes>
    </BrowserRouter>
</template>

<!-- Users.vue -->
<template>
  <div>
    <nav>
      <Link to="me">My Profile</Link>
    </nav>

    <Outlet />
  </div>
</template>

HashRouter

StaticRouter

StaticRouter, HashRouter are not implemented yet

Hooks

useInRouterContext

is not implemented since it is easy to check in Vue

export default {
  setup() {
    const locationContext = inject(LOCATION_CONTEXT, null)
    if (locationContext === null) {
      throw new Error('not in router context')
    }
    // ...
  },
}